Question

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

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

在li的边距和填充上进行了一些试验和错误，我大致达到了谷歌浏览器的第一点（请参阅此jsfiddle），但在Firefox中li的不适合ul因此他们不会留在一条线上。此外，放大/缩小时，最后li会向第二行“溢出”。

我在margin:5px auto元素上使用padding:5px auto和li进行了尝试，但此处auto似乎意味着为零。

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

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

Answer 1

我在CSS中编辑了很多内容，请查看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。希望它适合你。

P.S。确保在使用时从cf删除课程ul。

Answer 2

我认为有些挫折可能会觉得这很有用：

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

Answer 3

喜欢这个

ul#mmenu li
{
padding:7px;
}

<强> DEMO

Answer 4

您需要调整ul#mmenu中的填充我将填充更改为padding:7px 23px;并保持一行，但最后一个菜单的右端会有一个空格

Answer 5

你可以给li物品提供绝对位置并定位它们（首先是左：0，第二：左：100px左右......最后有右：0，依此类推）。这样，当你缩放它们时它们总是在同一个地方。

Answer 6

对于那些想要避免使用CSS table和table-cell的人，顺便说一句，我没有任何问题，你可以在text-align:justify上使用UL调整。

基本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>

注意我们已经丢失了clearfix，因为：a）我们不会使用浮点数而b）它会破坏这个解决方案。

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;
}

我还删除了Updated Fiddle

中的:first-child样式

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

6 个答案: