カテゴリ：CSS小技 2008年3月11日 16:43
float させてリストを横に並べる機会は結構あると思います。
メニューなんかの場合はそれぞれのリスト要素を余白を空けずに並べたりしますが、
通常のリストなんかの場合は左右どちらかに余白を空けて並べるのが通常だと思います。n
その際、当然 margin を使ってそれぞれのリストとの余白を空けますが、
すべてが同じ CSS が適用されるため、margin を指定したくない（大概は最後の）要素が出てきます。
最後の部分に別途クラスを指定するか、CSS3 であれば 3 回に 1 回の部分は margin を消す、
なんていうフレキシブルな対応ができますが、CSS3 はまだまだ実装されてきているとは言えません。n
そこで、現状でも使えるプロパティのみで親要素の両端にぴったりとくっつくように
リスト要素を収める方法を書いてみました。n
▼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）を施す、ということです。n
この記事のカテゴリー一覧を見る⇒CSS小技
トラックバックURL
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
