一行足すだけでリストが横並びになる便利なコード

Tweet

グローバルナビなど横並びのメニューを作成するときに float や position を使う方法がありますが、今回は一行追加するだけで横並びになる便利なコードを紹介します♪

display:inline-block; を使って横並びにする方法

css の li に display:inline-block; を追加します。

HTML

<nav>
    <ul class="global-nav">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
</nav>

CSS

.global-nav li {
    display: inline-block;
	list-style: none;
}
.global-nav li a {
	display: block;
	text-decoration: none;
	background: #ff69B4;
	color: #fff;
    padding: 15px 30px;
}
.global-nav li a:hover {
	opacity: 0.5;
}

横並びにできました。ただ li と li の間に隙間が空きます。この隙間を詰めたいときは li の親要素 ul に font-size:0; を指定し、 li に任意のサイズで font-size:***px; を指定します（ここでは font-size:14px;に指定しています）。

CSS

.global-nav {
	font-size: 0;
}
.global-nav li {
    display: inline-block;
	list-style: none;
	font-size: 14px;
}
.global-nav li a {
	display: block;
	text-decoration: none;
	background: #ff69B4;
	color: #fff;
    padding: 15px 30px;
}
.global-nav li a:hover {
	opacity: 0.5;
}

これで隙間が詰まりました♪いっちょあがりです。

FlexBoxの display:flex; を使って横並びにする方法

css の ul に display:flex; を追加します。

HTML

<nav>
    <ul class="global-nav">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
</nav>

CSS

.global-nav {
	display: flex;
}
.global-nav li {
	list-style: none;
}
.global-nav li a {
	display: block;
	text-decoration: none;
	background: #ff69B4;
	color: #fff;
    padding: 15px 30px;
}
.global-nav li a:hover {
	opacity: 0.7;
}

こちらは li と li の間に隙間が空きません！
Flexboxはその他にもできる事がたくさんあります。そして、Flexboxに対応したブラウザが増えてきました。これから実務で使う機会が増えてくると予測されるのでいろいろチェックしてみてください♪

尚、Smart Pocke はシンプルな内容で簡潔に紹介することを心掛けています。
それに伴い、この記事では古いブラウザに対応する際に必要なベンダープレフィックス( -webkit- や -moz- )などの記述を省かせてもらっています。上記の方法で動作が上手くいかない場合などは他に対処する必要がありますのでご了承ください。

Tweet