0

我试图让a 中li的元素ul具有相等的宽度，并适合一行，使用 CSS，但不知道创建 CSSli时有多少 s （即动态生成的 HTML）。

W3Schools 有一个导航栏示例，但它是固定宽度的，如果您添加另一个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，菜单仍然会显示得很好。

4

2 回答 2

1

甚至认为我讨厌这个解决方案......如果你真的需要它来处理 HTML/CSS 和自动更新宽度，那么表格就可以了。

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

编辑：实际上，取决于您的目标浏览器。您可以使用这些display: table东西，但仅限于 IE8+。

演示

于 2012-08-14T14:26:58.693 回答
0

我猜你将不得不用javascript来做到这一点......

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

于 2012-08-14T14:22:20.003 回答