用css自动计算菜单项宽度

Question

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

示例小提琴：

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，如果您知道总宽度（以像素为单位））对服务器端的内联宽度进行硬编码，具体取决于有多少顶级项目。