頂部導航區域內的浮動UL

我有兩個UL頂級導航區域。一個向左飄，一個向右飄。頂部導航區域內的浮動UL

在IE7中，右側浮動的UL似乎一直延伸到左側，佔據整個可用空間。在IE8和更多當前的瀏覽器中，它當然很好......它們只擴展了LI中內容的寬度。

例如：

IE7

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

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

我試圖與最小寬度，寬度和涉足，但不能似乎得到它的權利...... 這只是對IE7採取默認行爲增加整個寬度，除非用設定的像素寬度或百分比指定。

來源

2011-06-27 tony noriega

請創建[jsFiddle]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/）測試用例。 – thirtydot

作爲一般建議，浮動元素應具有定義的寬度。如建議，請提供HTML和CSS！ – Jawad

爲浮動元素設置寬度（最好）或顯示：inline。

風格

.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不識別最小寬度。

來源

2011-06-27 17:40:50

頂部導航區域內的浮動UL

回答

相關問題