CSS 如何将 <li> 元素保持在固定宽度 <ul> 的单行上?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18378800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep <li> elements on single line in fixed width <ul>?
提问by RubenGeert
I've a header div
and a menu ul
below it. I'd like to accomplish 2 things:
我有一个标题div
和ul
它下面的菜单。我想完成两件事:
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
1)ul
应该具有与div
(外部垂直边界完全相同的x位置2)相同的宽度我想保持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
边距和填充的一些试验和错误,我大致实现了 Google Chrome 中的第一点(请参阅此jsfiddle),但在 Firefox 中li
不适合,ul
因此它们不会停留在一行上。此外,li
当放大/缩小时,最后一行往往会“溢出”到第二行。
I tried it with margin:5px auto
and padding:5px auto
on the li
elements but here auto
seems to mean zero.
我试了一下margin:5px auto
,并padding:5px auto
在li
元素,但这里auto
似乎意味着零。
Is this really difficult/impossible or am I overlooking something obvious?
这真的很难/不可能还是我忽略了一些明显的东西?
I also tried width:fit-contents
but that didn't help either.
我也尝试过,width:fit-contents
但这也无济于事。
回答by LinkinTED
I edited a whole lot in your CSS, check the updated fiddle.
我在你的 CSS 中编辑了很多,检查更新的 fiddle。
Basicly, this is what I've done:
基本上,这就是我所做的:
HTML:
HTML:
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
CSS:
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
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.
ul 显示为表格,li 显示为表格单元格,使其与标题的宽度相同。在 li 中,我将锚点显示为一个块,使它们充满整个 li。希望它适合你。
P.s. make sure you remove the class cf
from the ul
when you use this.
Ps 确保在使用它时cf
从 中删除该类ul
。
回答by Fable4Life
I think some fellow frustrates may find this useful:
我认为一些沮丧的人可能会发现这很有用:
.main-menu ul li ul li{
white-space: nowrap;
}
回答by Vladislav Stanic
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
您可以为 li 项目提供绝对位置并定位它们(第一个有 left:0,第二个:left:100px 左右......最后有 right:0 等等)。这样,当您缩放时,它们将始终位于同一位置。
回答by Sharath Daniel
You'll need to adjust the padding in ul#mmenu
I changed the padding to padding:7px 23px;
and it stays in a single line,but there will be a blank space at the right end of the last menu.
您需要在ul#mmenu
I 将填充更改为中调整填充padding:7px 23px;
并保留在一行中,但在最后一个菜单的右端会有一个空格。
回答by Jon P
For those wanting to avoid CSS table
and table-cell
, which by the way, I have no probelm with you can use text-align:justify
on the UL
with a couple of tweaks.
对于那些想要避免使用 CSStable
和 的人table-cell
,顺便说一下,我没有问题,您可以通过一些调整来使用text-align:justify
它UL
。
Basic HTML:
基本 HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
请注意,我们已经丢失了 clearfix,因为:a) 我们不会使用浮点数,并且 b) 它破坏了这个解决方案。
CSS:
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child
style in the Updated Fiddle
我还删除:first-child
了更新小提琴中的样式