6

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

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

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

我在元素上尝试了它，margin:5px auto但这里似乎意味着零。padding:5px autoliauto

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

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

4

6 回答 6

15

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

Ps 确保在使用它时cf从 中删除该类ul。

于 2013-08-22T11:31:38.673 回答
9

我认为一些沮丧的人可能会发现这很有用：

.main-menu ul li ul li{
  white-space: nowrap;
}
于 2014-08-21T06:05:21.057 回答
1

像这样

ul#mmenu li
{
padding:7px;
}

演示

于 2013-08-22T11:27:03.687 回答
0

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

于 2013-08-22T11:19:05.770 回答
0

您可以为 li 项目提供绝对位置并定位它们（​​首先有 left:0，第二个：left:100px 左右......最后有 right:0 等等）。这样，当您缩放时，它们将始终位于同一位置。

于 2013-08-22T11:29:12.947 回答
0

对于那些想要避免使用 CSStable和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;
}

我还删除了更新小提琴:first-child中的样式

于 2014-08-22T01:10:52.610 回答