愚者の経験

「また今度」はほとんどこない

日別アーカイブ: 6月 16, 2012

liをdisplay:inline-blockで並べた時の隙間

リストを横に並べるときに「display:inline-block」を使うと
隙間が出来ます。これはHTMLソース側でとの間に改行、タブ文字がある場合に空白として認識されるためなのだそうですが…

ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
background-color:#ff9;
display:inline-block;
margin:0;
padding:0;
}
<ul>
<li>HOME</li>
<li>MENU</li>
<li>TOPPING</li>
<li>LINK</li>
</ul>

このように空白ができます。デザインする場合あんまりよくありませんね。
解決方法はいろいろあるみたいです。
・リストで改行を入れずにつなげて書く。

の間をコメントアウト()する。
・「display:inline-block」でなく「float:left」にする。
・「margin」を調整する。
・「letter-spacing」を調整する。
しかし簡単さでいうと親要素(つまりul)に「font-size:0;」を指定するが一番いいと思います。

ul
{
list-style-type:none;
font-size:0;
margin:0;
padding:0;
}
li
{
background-color:#ff9;
display:inline-block;
margin:0;
padding:0;
}

<ul>
<li>HOME</li>
<li>MENU</li>
<li>TOPPING</li>
<li>LINK</li>
</ul>
広告