acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

横並びリストを自動で折り返させる

ads

2008/9/1 IE8に合わせて修正

リストの幅を決めて横並びにするとul(ol)の幅を超えたところでカラム落ちが発生し自動で折り返したように見えます。

ul{
width:660px;
}

li{
float:left;
margin-right:20px;
margin-bottom:20px;
background-color:#999999;
width:200px;
}

上のサンプルではliの幅を指定したため等幅になっていますが、幅を指定しない場合は文字数に応じた幅になります。
liはdisplay:list-itemというブロック要素で、文字数が多く残りの幅に入らない場合はカラム落ちします。
Firefoxでは問題ありませんが、IE7以前では適切にレンダリングされず、下の画像のようになります。

IE7表示サンプル

これを回避するためにはwhite-space:nowrap;を記述します。
しかし折り返し禁止のため、文字数が横幅を超えた場合は、幅を超えて文字が表示されてしまうという弊害が生じますが仕方ありません。

ul{
width:660px;
}

li{
float:left;
margin-right:20px;
margin-bottom:20px;
background-color:#999999;
white-space:nowrap;
}

上記のCSSからwhite-space:nowrap;を削除すると以下のようになります。Firefox、IE8以降はきれいにレンダリングされます。

リストのCSSテクニック

floatを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.