横並びのメニューを display:xxxx (inline、inline-block、table、flex) を使って作成したのをまとめてみました。inline 以外は中央寄せと横幅いっぱいのメニューを作成しました。
昔は float:left を使っていましたが、float:left を使うとセンタリングの設定が面倒だったり、回り込みの解除が必要なので全然使っていません。今は inline-block が一番多く使っていますが、flex が一番使いやすいです。
1. display:inlineを使用した場合
inline なので、上下のマージンやサイズを指定できないので、枠を描画しないメニューの時に使用しています。この例では、フッターのメニューを作成しました。
html
<div id="nav1">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav1 {
width: 100%;
text-align: center;
display: block;
}
#nav1 ul {
font-size: 16px;
margin: 16px 0;
padding: 0; /* リストのマーク分の余白ができるので消すために 0 としています */
list-style: none;
}
#nav1 li {
margin: 0 -5px; /* リストとリストの間の空白を消すため */
padding: 0 12px;
display: inline;
border-right:1px solid #000;
}
#nav1 li:last-child {
border-right: none;
}
#nav1 li a {
color: #000;
text-decoration: none;
}
#nav1 li a:hover {
color: #f00;
text-decoration: underline;
}
リストとリストの間の隙間対策
display:inline や display:inline-block を使用すると上のhtmlの書き方だと、リストとリストの間に空白がでできてしまいます。これは改行コードが空白として挿入されてしまうためです。 隙間を作らない対策としては以下の通りです。
1.htmlファイルの記述で li を全てつなげる
<li><a href="#">TEST 01</a></li><li><a href="#">TEST 02</a></li><li><a href="#">TEST 03</a></li><li><a href="#">TEST 04</a></li>
2.マージンで隙間を消す、そのためメニューの横幅がマージン分小さくなります。
li {
margin: 0 -5px;
}
3.ul のフォントサイズを0にして、li でフォントサイズを指定する
ul {
font-size: 0;
}
li {
font-size: 18px;
}
2. display:inline-blockで中央寄せにした場合
display:inline-block は、リストのマージンやサイズを指定できますので、枠を描画したメニューに適しています。この例ではメニューの横幅を指定して、中央寄せにしています。 li に box-sizing: border-box を使うことで、border の線も含めて横幅にしています。
html
<div id="nav2">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav2 {
width: 100%;
text-align: center;
display: block;
}
#nav2 ul {
font-size: 0;
margin: 8px 0;
padding: 0;
list-style: none;
}
#nav2 li {
box-sizing: border-box;
width: 120px;
font-size:18px;
display: inline-block;
border:1px solid #000;
}
#nav2 li a {
text-decoration: none;
padding: 8px;
color: #000;
display: block;
}
#nav2 li a:hover {
background: #ccc;
}
3. display:inline-blockで横幅いっぱいのメニューの場合
メニューの数が５つありますので、メニューの横幅を20%にして１列に表示しています。この場合に li に box-sizing: border-box を設定しないと border の線の分が増えてしまい、横幅がトータル100%以上になって１列に表示されなくなります。
html
<div id="nav2-1">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav2-1 {
width: 100%;
display: block;
}
#nav2-1 ul {
width: 100%;
font-size:0;
text-align: center;
margin: 8px 0;
padding: 0;
list-style: none;
}
#nav2-1 li {
box-sizing: border-box;
width: 20%;
font-size:18px;
padding: 0;
display: inline-block;
border:1px solid #000;
}
#nav2-1 li a {
text-decoration: none;
padding: 8px;
color: #000;
display: block;
}
#nav2-1 li a:hover {
background: #ccc;
}
4. display:table で中央寄せにした場合
display:table は、リストのサイズを変更できますが、マージンは設定できません。
ul にdisplay: table; と table-layout: fixed;、 li に display: table-cell; とwidth: を設定します。
html
<div id="nav3">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav3 {
width: 100%;
display: block;
}
#nav3 ul {
font-size:18px;
margin: 8px auto;
padding: 0;
text-align: center;
list-style: none;
display: table;
table-layout: fixed; /* 横幅を固定にする */
}
#nav3 li {
box-sizing: border-box;
width: 120px;
display: table-cell;
border:1px solid #000;
}
#nav3 li a {
text-decoration: none;
padding: 8px;
color: #000;
display: block;
}
#nav3 li a:hover {
background: #ccc;
}
5. display:tableで横幅いっぱいのメニューの場合
display:table は、リストのサイズを変更できますが、マージンは設定できません。
ulにdisplay: table; と table-layout: fixed; とメニュー全体のサイズ、 li に display: table-cell; を設定します。li に横幅を設定しなくても均等なサイズにしてくれます。
html
<div id="nav3-1">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav3-1 {
width: 100%;
display: block;
}
#nav3-1 ul {
width: 100%;
font-size:18px;
margin: 8px auto;
padding: 0;
text-align: center;
list-style: none;
display: table;
table-layout: fixed; /* 横幅を固定 */
}
#nav3-1 li {
display: table-cell;
border:1px solid #000;
}
#nav3-1 li a {
text-decoration: none;
padding: 8px;
color: #000;
display: block;
}
#nav3-1 li a:hover {
background: #ccc;
}
6. display:flex で中央寄せにした場合
display:flexは、リストのサイズを変更できます。左右のマージンは設定できませんが、justify-content: に、space-between や space-around を設定すると間隔を作ることができます。
ul に display: flex; と justify-content: center; を設定します。
html
<div id="nav4">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav4 {
width: 100%;
display: block;
}
#nav4 ul {
font-size: 18px;
margin: 8px auto;
padding: 0;
text-align: center;
list-style: none;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
#nav4 li {
box-sizing: border-box;
width: 120px;
border:1px solid #000;
}
#nav4 li a {
text-decoration: none;
padding: 8px;
color: #000;
display: block;
}
#nav4 li a:hover {
background: #ccc;
}
7. display:flexで横幅いっぱいのメニューの場合
ul に display: flex;、li に flex-grow: 1; を設定します。li に横幅を設定しなくても均等なサイズにしてくれます。
html
<div id="nav4-1">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
#nav4-1 {
width: 100%;
display: block;
}
#nav4-1 ul {
width: 100%;
font-size: 18px;
margin: 8px auto;
padding: 0;
list-style: none;
text-align: center;
display: -webkit-flex;
display: flex;
}
#nav4-1 li {
-webkit-flex-grow: 1;
flex-grow: 1;
border:1px solid #000;
}
#nav4-1 li a {
text-decoration: none;
padding: 8px;
color: #000;
display: block;
}
#nav4-1 li a:hover {
background: #ccc;
}
calcを使用してflexの子要素の長さを決める方法 
ラジオボタンやチェックボックスでボタンの次に改行が入りずれてしまうのを防ぐ方法 
画像の上に透けている文字列を表示する方法 
clamp関数を使ってフォントサイズを可変にする方法 
見出しに文字の長さだけ間隔をあけて下線を引く 
テーブルのセルの結合 
前：カード型デザインのマウスホバーエフェクト
次：メニューにborder-bottomでマウスホバーエフェクト
やったー！
やっと出来ました。あなたのお陰で山ほどの資料を来る日も来る日も検策しましたがどうしてもできませんでした。いつせい様のsiteに出会えてやっと出来ました。Thank you so much!!
「横並びのメニューを使って作成」であなたのお陰でﾒﾆｭが横並びになりましたがの間に記入していましたでheaderの下に配置することが出来ず試行錯誤でにcopy&pasteしたところやっと出来ました。
それにしても、いつせい様のWeb siteは大変品が良く素晴らしいsiteです、これから少しずつ拝見、お勉強させて頂きます。楽しみです。ありがとう御座いました。
追伸
今送信しましたｺﾒﾝﾄの部分が抜けて表示されていましたので・・
body～/bodyﾀｸﾞの中にcopy&pasteしました。記入場所が違っていました。h2に入れたら無事できました。
Good Day
Kazue Utsumi
コメントありがとうございます。
横並びのメニューができたとのことで、お役に立ててよかったです。