フローティングULをトップナビゲーションエリア

Question

私は2つのULを持つトップナビエリアを持っています。 1つは左に浮かび、1つは右に浮かんだ。

IE7では、右に浮かんだULは、利用可能なスペース全体を左に伸ばしているようです。 IE8以上のブラウザではもちろん、LIのコンテンツの幅を拡張するだけです。

例：

IE7

<---Floated left UL---><----------------------------Floated right UL---> 

in IE8 
<---Floated left UL--->       <---Floated right UL---> 

私は分の幅で手を染めてみました、と幅が、右のそれを得るように見えるカントている... は取るためにIE7のためだけのデフォルトの動作このです設定されたピクセル幅またはパーセントで指定されている場合を除き、全体の幅を拡大します。

Answer 1

浮動小数点型の要素に幅（望ましい）または表示：インラインを指定します。あなたはより多くのリストのスタイルをしたいと思う明らか

スタイル

.nav {display:inline; background:#CCC;} 
ul.nav li {display:inline; margin:0 0.1em;} 
#nav1 {float:left;} 
#nav2 {float:right;}

HTML

<ul id="nav1" class="nav"> 
    <li>Lorem</li> 
    <li>Ipsum</li> 
    <li>Dolor</li> 
</ul> 
<ul id="nav2" class="nav"> 
    <li>Sit amet</li> 
    <li>Consectetur</li> 
    <li>Adipiscing</li> 
</ul>

。私は文脈のためにいくつかのスタイリングを提供した。ところで、IEは最小幅を認識しません。