[css]li要素をfloatさせた時の注意点

ちょっと前まではまってたのでメモ的エントリ。

よくli要素をfloat:leftさせてテキストリンクのナビゲーションを作ったりするのですが、FireFoxではキレイに改行されてるのにIEで見ると親ボックスの幅いっぱいのところのテキストは下図のように改行されていました。



（上図li要素のスタイルシート）
li{
float:left;
margin-left:1.1em;
margin-bottom:0.5em;
background:#eee;
white-space:nowrap;
}

仕方ないので1行毎ul要素で区切っていたのですが少し調べてみたら簡単に解決しました。
li要素のスタイルシートにwhite-space:nowrap;と記述するだけでした。



（上図li要素のスタイルシート）
li{
float:left;
margin-left:1.1em;
margin-bottom:0.5em;
background:#eee;
white-space:nowrap;
}

問題解決♪