html - 使用CSS自动计算菜单项宽度

Question

我有一个用 ul li 创建的菜单。我想用 css 自动定位菜单项，以便在更改菜单项文本后，将重新计算位置。在示例中， fiddle 定位是通过填充完成的，在这种情况下，如果文本变长，它将转到下一行。

示例 fiddle :

http://jsfiddle.net/amkrtchyan/9WbaC/

Answer 1

这是我一直遇到的问题，因为我们网站的导航总是由客户构建，我们不知道会有多少元素。

您可以使用 table 类型的显示属性来执行此操作:

nav {display:table;}
nav ul {display:table-row;}
nav ul li {display:table-cell;}

除此之外，我从您的列表项中删除了 float:

• 下面是很多元素的样子:http://jsfiddle.net/9WbaC/2/

我使用了带有空格的文本，因此您可以看到这对环绕的影响。

• 这是只有几项的样子:http://jsfiddle.net/9WbaC/3/

另一种解决方案是根据顶级元素的数量，使用百分比(或者 px 如果您知道以像素为单位的总宽度)对服务器端的内联宽度进行硬编码。