リストタグを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. #1 by オラオラ on 2006年7月5日 - 10:33

    <strong>links for 2006-07-04</strong>

    「突然メールが送れなくなる!?」迷惑メール対策のOP25Bとは O...
(will not be published)