横並びのメニューを 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で横幅いっぱいのメニューの場合

メニューの数が5つありますので、メニューの横幅を20%にして1列に表示しています。この場合に li に box-sizing: border-box を設定しないと border の線の分が増えてしまい、横幅がトータル100%以上になって1列に表示されなくなります。

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;
}