横並びメニューの基本のサンプルです。以下のようなメニューバーを作成します。
横並びメニューを作成する方法はいくつかありますが、今回は 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;
}その他
メニューバーを画面一杯に表示させるにはユニバーサルセレクタを指定して下さい。
参考