水平列表不移動LI

好的，所以我正在爲導航欄編寫CSS，該導航欄使用無序列表來組織菜單。菜單居中不會推到任何一邊，任何給定的li元素的寬度不能預先確定（它隨菜單項中文本的多少而變化），所以我不能硬編碼寬度。水平列表不移動LI

我有以下的CSS代碼：

#nav ul { 
    list-style: none; 
    padding-bottom: 10px; 
    height:16px; 
} 
#nav ul li { 
    position: relative; 
    display: inline-block; 
} 
#nav { 
    position: relative; 
    margin-top: -30px; 
    text-align: center; 
    font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif; 
    font-size: 14px; 
}

的導航元素，這完美的作品產生居中導航菜單在Chrome 13。但是，當我在IE8瀏覽網頁時，UL圈垂直，我不能讓它變成水平。

到目前爲止，搜索結果表明我需要float:left;或float:right; <LI> s使菜單水平。我試過這個，它確實使菜單在IE8中水平，但它會浮動到左側或右側。我需要居中菜單，顯然沒有float:center;。

對應菜單的HTML是

<div id="nav"> 
    <ul> 
     <li class="current_page_item">[LINK]</li> 
     <li class="page_item">[LINK]</li> 
     <li class="page_item">[LINK]</li> 
    </ul> 
</div>

有沒有，而無需知道李家的寬度或不必訴諸JS得到菜單中心和水平什麼辦法？

來源

2011-08-04 Jabbany

該代碼工作正常IE8，看看自己：

http://jsfiddle.net/bEEEb/

它可能並不適合你的工作，因爲你在IE8模式（IE7模式或Quirks模式的替代品）不是。

添加DOCTYPE作爲第一行，如果你沒有一個：

<!DOCTYPE html>

如果您需要這在IE7也工作（其中inline-block只適用於在默認情況下自然地內聯元素），然後用replace display: inline-block：

display: inline-block; 
*display: inline; 
zoom: 1;

..of當然，如果你能display: inline脫身，這是最簡單的修復，但你還是應該明白爲什麼沒有被顯示在IE8模式頁面。

來源

2011-08-04 16:00:30 thirtydot

我看，謝謝你的這個提示。我試圖達到最高的瀏覽器兼容性。 – Jabbany

IE不支持display: inline-block，請使用display: inline代替你的li元素。

來源

2011-08-04 15:55:20 Michael

感謝您的提示。這工作完美〜 – Jabbany

只是用你的李以下幾點：

display: inline;

應該讓你的願望的結果。

來源

2011-08-04 15:56:32 Hanny

水平列表不移動LI

回答

相關問題