Posts Tagged css

リストタグをfloat:leftする時の注意

CSSコーディングでは、リストタグをfloat:leftで横に並べてメニューなどを作ることが多いです。

//html
<ul>
<li>home</li>
<lli>page1</li>
<li>page2</li>
</ul>

//css
li {
float: left;
}

これでFireFoxやWinIEなど主要ブラウザではリストが横に並ぶのですが、正確にはこの記述は間違いで、

li {
float:left;
width:**px;
}

とwidthを指定しなければいけません。この書き方でmac-ieでも表示されるようになります。
まぁよく考えたら、liはblock要素だから、幅を指定しなければ横100%になって、フロートした次の要素が回り込む隙がないですから、どちらかというと先の書き方でうまくいってしまうFirefoxなどの解釈が間違っているということでしょうか。

1 Comment