css

横並びメニュー

横並びメニューの基本のサンプルです。以下のようなメニューバーを作成します。

横並びメニューを作成する方法はいくつかありますが、今回は flex を使用します。

HTML

リストを使用します。

  <ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">MENU1</a></li>
    <li><a href="#">MENU2</a></li>
  </ul>

CSS

flexを使用します。子要素に flex: 1 を指定するとメニューが均等に配置されます。

#nav {
  list-style: none;
  display: flex;
  width: 100%;
}

#nav li {
  flex: 1;
  text-align: center;
  background-color: #333;
}

#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

その他

メニューバーを画面一杯に表示させるにはユニバーサルセレクタを指定して下さい。

© DeNnie.Lab All Rights Reserved.