html - 创建固定宽度的水平菜单的最佳方法

Question

我想知道，创建具有固定宽度和可变数量项目的水平菜单的最佳方法是什么？

要调整菜单以使项目在菜单条上等间距，似乎唯一的方法是使用 table width=100% 作为菜单包装器和项目作为 td。所以他们会自动调整。

是否有另一种解决方案(没有 td)，考虑到我们不知道项目的数量，而且它可以变化？

Answer 1

你可以给<ul>/<ol>一个display: table和 <li>一个display: table-cell :

HTML:

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

CSS:

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
}

http://jsfiddle.net/8RXUw/