リスト < li > タグの横並び時の隙間をなくす方法

リストタグはメニューなどでよく使いますが、リストをdisplay:inline-blockを使って横並びにするとリストとリストの間に隙間ができてしまいます。それを簡単な方法で解決します。

解決方法

CSS（スタイルシート）で、親のulにfont-size: 0を入れる。

ul {
    font-size: 0;
}

li{
    display: inline-block;
}

他にもいくつか方法があるようですが、私はこの方法を使っています。

別の方法

HTMLの方で改行せずに書く。

<ul>
    <li>メニュー１</li><li>メニュー２</li><li>メニュー３</li>
</ul>