左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技

2008年3月11日 16:43

floatさせてリストを横に並べる機会は結構あると思います。
メニューなんかの場合はそれぞれのリスト要素を余白を空けずに並べたりしますが、
通常のリストなんかの場合は左右どちらかに余白を空けて並べるのが通常だと思います。

その際、当然marginを使ってそれぞれのリストとの余白を空けますが、
すべてが同じCSSが適用されるため、marginを指定したくない（大概は最後の）要素が出てきます。
最後の部分に別途クラスを指定するか、CSS3であれば3回に1回の部分はmarginを消す、
なんていうフレキシブルな対応ができますが、CSS3はまだまだ実装されてきているとは言えません。

そこで、現状でも使えるプロパティのみで親要素の両端にぴったりとくっつくように
リスト要素を収める方法を書いてみました。

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技サンプル

▼EntryMore▼

ポイントは、「#listFloatSample ul」の部分です。
margin-right: -6pxで最後のリスト要素のmargin分マイナスしてはみ出した部分を相殺します。
margin-top: -10pxで、上部分のmarginを相殺しています。
本来であればmargin-bottomで下に余白を作るところですが、下余白の場合、
最後のmargin-bottomで親要素との間に余白ができてしまい、
ネガティブマージン（マイナス値のマージン）では相殺できないためです。

さらに重要なのがzoom: 1です。
これを指定しているのは、IEのhasLayout対策のためです。
これを入れないとうまくネガティブマージンが動作せず、カラム落ちしてしまいます。

まとめると、floatさせた要素のmargin分、その親要素のネガティブマージンを使って相殺し、さらにIE対策のためにその親要素にhasLayout対策（このサンプルではzoom: 1）を施す、ということです。