如何在固定宽度<ul>的单行上保持<li>元素？

Question

我有一个标题div和ul下面的菜单.我想完成两件事:

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

通过对li边距和填充的一些试验和错误,我大致达到谷歌Chrome中的第一点(请看这个jsfiddle),但在Firefox li中,ul它们不适合这样,所以它们不会留在一条线上.此外,li当放大/缩小时,最后一个倾向于"溢出"到第二行.

我试了一下margin:5px auto,并padding:5px auto在li元素,但这里auto似乎意味着零.

这真的很难/不可能,还是我忽略了一些明显的东西？

我也试过,width:fit-contents但也没有帮助.

Answer 1

我在你的CSS中编辑了很多,检查更新的小提琴.

基本上,这就是我所做的:

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.希望它适合你.

Ps确保cf从使用ul时删除该类.

Answer 2

我认为一些挫折者可能觉得这很有用:

.main-menu ul li ul li{
  white-space: nowrap;
}