【CSS】display:inline-block;での横並びと隙間対策

要素の横並び

まずは、以下のようなHTMLでグローバルナビの横並びのやり方です。

<nav>
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
	</ul>
</nav>

CSSは以下のように記載します。
横並びにする要素にdisplay:inline-block;を指定し、vertical-align:middle;で縦位置中央に揃えています。

ul {
	text-align:center; /* 中央揃え */
}
ul li {
	display:inline-block;
	vertical-align:middle; /* 縦位置中央揃え */
}

liの右・下側に余白が入る

上記のようなdisplay:inline-block;で横並びにした際、inline-blockを指定した要素の右・下に若干の余白が入ってしまいます。
これは、ソース上の改行が原因のようです。これを解消すにはcssを以下のように変更して下さい。

ul {
	font-size:0;
	text-align:center; /* 中央揃え */
}
ul li {
	font-size:14px;
	display:inline-block;
	vertical-align:middle; /* 縦位置中央揃え */
}

余白を削除する為に、横並びにする要素の直前の親要素に対しfont-size:0;を指定し、このままではliの文字サイズが0なので任意で文字サイズを指定して下さい。

他には以下のような方法もあります。
・<li>の終了タグ</li>を記載しない
・<li>タグ後の改行を取りつなげる
・親要素にletter-spacing:-1em;を指定し、子要素にletter-spacing:0em;を指定する
というようなやり方もありますが、あまりソース上綺麗ではない感じがします(笑)

最後に

他にも横並びのやり方はあります。
例えばdisplay:table;とdisplay:table-cell;での方法など。また後日掲載したいと思っています。