display:inlineで横並びにした際に出来る余白を消す方法
li要素をdisplay:inlineを使って横並びにさせる事ってけっこう使うと思うですが、この時にソース上で改行していたり、スペースを開けているとちょっとした余白が出来ると思います。
その余白を消す方法を THE HAM MEDIAさんの「リストを横並びにした時の空白をなくす方法」でいくつか紹介されていた中でほぼ全てのブラウザで対応が出来る方法のみを紹介したいと思います。
ベーシック
<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
ul { margin: 0; padding: 0; }
li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
一般的によく使われるXHTMLのソースです。サンプルページを見て貰った分かる通りちょっとした余白が出来てしまいます。
余白消す方法 1 改行をしない
<ul>
<li>サンプル</li><li>サンプル</li><li>サンプル</li><li>サンプル</li><li>サンプル</li>
</ul>
ul { margin: 0; padding: 0; }
li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
余白消す方法 2 コメントアウトを使う
<ul>
<li>サンプル</li><!--
--><li>サンプル</li><!--
--><li>サンプル</li><!--
--><li>サンプル</li><!--
--><li>サンプル</li>
</ul>
ul { margin: 0; padding: 0; }
li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
余白消す方法 3 table-cellを使う
<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
li {
list-style-type: none;
display:table-cell;
*display:inline;
*zoom:1;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
まとめ
table-cellを使う事で余白を消せる事は初めて知りましたね。
どの方法が正解とはないので、どれを使うは自分次第でよいかと思いますよ。
ご指摘ありがとうございました！
完全にサンプル2のソースでしたね…すみませんでした。
修正しておきました。
2009年04月30日 13:42