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分配一个固定的宽度。