Css 如何保持<；李>；固定宽度单线上的元素<；ul>；？

我有一个标题

div

，下面有一个菜单

ul

。我想完成两件事：

1）

ul

的宽度应与

div

的宽度相同（外部垂直边框与x位置完全相同 2） 我希望保持

li

元素之间的间距大致相等

通过对

li

的边距和填充的一些尝试和错误，我在Google Chrome中大致达到了第一点（请参见此），但在Firefox中

li

不适合

ul

，因此它们不会停留在一行上。此外，放大/缩小时，最后一个

li

往往会“溢出”到第二行

我在

li

元素上尝试了

margin:5px auto

和

padding:5px auto

，但这里

auto

似乎表示零

这真的很难/不可能，还是我忽略了一些显而易见的事情

---

我还尝试了

width:fit contents

，但也没有效果。

您需要调整

ul#mmenu

中的填充，我将填充改为

padding:7px 23px并保持在一行中，但在最后一个菜单的右端将有一个空格。
像这样

ul#mmenu li
{
padding:7px;
}

您可以为li项指定绝对位置并对其进行定位（第一个为左：0，第二个为左：100px左右…最后一个为右：0，依此类推）。这样，当您缩放时，它们将始终位于同一位置。
我在您的CSS中编辑了很多内容，请检查

基本上，我就是这么做的：

HTML:

ul显示为表格，li显示为表格单元格，宽度与页眉相同。在li中，我将锚点显示为一个块，使它们填充整个li。希望它适合你

请注意，当您使用此功能时，请确保从
ul
中删除
cf
类。
我认为一些沮丧的同事可能会发现此功能很有用：

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

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

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

我还删除了ul#mmenu liI中删除字母间距的
中的
：first child
样式。我看不出您的小提琴中FF和CR之间有任何区别。。你能发布一个解释欲望行为的屏幕截图吗？这很好，尽管我通常对人们说，虽然这是一个完美可行的解决方案，除非你处理表格数据，为什么不使用其他选项呢？好吧，它使元素像一个表一样工作，而不是一个表。我不介意这样使用它。当人们试图使用列表或div来显示表格数据时，我更为烦恼。（offtopic）我需要在单行中显示更多li，如果宽度为low，则它将隐藏内容并隐藏溢出
.main-menu ul li ul li{
  white-space: nowrap;
}

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

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