如何保持< li>固定宽度的单线上的元素< ul> [英] How to keep <li> elements on single line in fixed width <ul>?

问题描述

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

I've a header div and a menu ul below it. I'd like to accomplish 2 things:

1） ul 应该与< c $ c> div （外部垂直边框完全相同x位置
2）我想保持 li 元素之间的间距大致相等

1) the ul should have the same width as the div (outer vertical borders exactly same x position 2) I'd like to keep the spacing between li elements roughly equal

在 li 的边距和填充上进行一些尝试和错误，我大致实现了第一点Google Chrome（请参阅此 jsfiddle ），但在Firefox中， li 不适合 ul ，因此它们不会停留在一行。此外，放大/缩小时最后的 li 往往会溢出到第二行。

With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.

尝试在 li 上使用 margin：5px auto 和 padding：5px auto c $ c>元素，但此处 auto 似乎意味着零。

I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.

这真的很难/看起来很明显吗？

Is this really difficult/impossible or am I overlooking something obvious?

我也尝试过 width：fit-contents p>

I also tried width:fit-contents but that didn't help either.

推荐答案

我在CSS中编辑了很多，检查 updated fiddle 。

I edited a whole lot in your CSS, check the updated fiddle.

基本上，这是我做的：

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

The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.

P.s。请确保在使用此操作时，从 ul 中删除​​ cf 类。

P.s. make sure you remove the class cf from the ul when you use this.

这篇关于如何保持&lt; li&gt;固定宽度的单线上的元素&lt; ul&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！