如何将

元素保持在固定宽度

的单行上？

我有一个标题div和一个菜单ul在它下面。我想完成两件事：

1) the ul应该具有相同的宽度div（外部垂直边框与 x 位置完全相同 2）我想保持间距li元素大致相等

经过一些尝试和错误li的边距和填充我大致实现了 Google Chrome 中的第一点（请参阅此jsfiddle http://jsfiddle.net/y4ANj) 但在 Firefox 中li不适合ul所以他们不会停留在一条线上。还有，最后li放大/缩小时往往会“溢出”到第二行。

我尝试过margin:5px auto and padding:5px auto on the li元素但在这里auto似乎意味着零。

这真的很困难/不可能还是我忽略了一些明显的事情？

我也尝试过width:fit-contents但这也没有帮助。

我在你的 CSS 中编辑了很多内容，请检查更新了小提琴 http://jsfiddle.net/LinkinTED/y4ANj/8/.

基本上，这就是我所做的：

HTML:

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

CSS:

ul {
    width: 960px;
    display: table;
    table-layout: fixed;
}
ul li {
    display: table-cell;
}
ul li a {
    display: block;
}

ul 显示为表格，li 显示为表格单元格，使其宽度与标题一样。在 li 中，我将锚点显示为一个块，使它们填充整个 li。希望它适合您。

附注确保删除该类cf来自ul当你使用这个的时候。