HTML/CSS：导航栏可适当拉伸，容纳可变HTML

我正试图让

li

元素在

ul

中具有相同的宽度，并适合一行，使用CSS，而不知道在制作CSSI时有多少

li

s（即动态生成的HTML）

W3Schools有一个导航栏，但它的宽度是固定的，如果您添加另一个

li

而不是缩放以适应，整个布局将被丢弃

这是他们的例子：

CSS:

HTML:

---

理想情况下，我可以添加另一个

li

，菜单仍然会显示得很好。

我想你必须用javascript来完成这项工作

---

您可以使用javascript获取窗口宽度和列表项的数量。如果你有这些，你可以使用javascript指定一个固定的宽度。

即使我讨厌这个解决方案。。。如果您真的需要它只处理HTML/CSS和自动更新宽度，那么一个表就可以了

否则，我建议您只需使用一些简单的JS更新宽度。如果您是通过JS添加额外的选项，那么很容易将其加入

编辑：实际上，这取决于你的目标浏览器。您可以使用

display:table

功能，但仅限于IE8+

---

我希望我不必这么做。。。丑陋的是JavaScript在页面加载后运行。我担心没有其他解决方案。。。在正常情况下，用户不会注意到javascript更改了布局。。

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;
}

<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>