HTML/CSS：導航欄延伸至適合，容納可變html

Question

我試圖讓li中的元素具有相同的寬度，並且適合CSS，但不知道有多少個li CSSis（即動態生成的HTML）。

W3Schools有一個導航欄example，但它是固定寬度的，並且如果您添加另一個li而不是縮放以適合，整個佈局將被丟棄。

這是他們的榜樣：

CSS：

ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 
li 
{ 
    float:left; 
} 
a:link,a:visited 
{ 
    display:block; 
    width:120px; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#98bf21; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
} 
a:hover,a:active 
{ 
    background-color:#7A991A; 
} 

HTML：

<ul> 
<li><a href="#home">Home</a></li> 
<li><a href="#news">News</a></li> 
<li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 

理想情況下，我將能夠添加其他li，菜單仍然會顯示很大。

Answer 1

即使我認爲我討厭這個解決方案...如果你真的需要它只使用HTML/CSS和自動更新寬度，一張桌子就可以做到這一點。

否則，我會建議只是有一些簡單的JS更新你的寬度。如果你通過JS添加額外的選項，將很容易把它扔進去。

編輯：其實，取決於你的目標瀏覽器。你可以使用display: table的東西，但它僅限於IE8 +。

DEMO

Answer 2

你將不得不使用JavaScript我想做到這一點...

，你可以使用JavaScript來獲取窗口的寬度和列表項的數目。如果你有這些，你可以使用javascript分配一個固定的寬度。