css - 水平菜单项跨越容器的宽度

Question

我搜索过这个问题，但在这里找不到。

有9个菜单项的水平列表，容器宽度为1200px。

目前，每个菜单项(除了最后一个)都有一个右边距以将它们隔开，但无论屏幕/浏览器宽度如何，菜单项都需要从左边缘跨越到右边缘。即使在浏览器最小化时使用媒体查询来减少右边距，它仍然会执行以下操作:

• 在列表右侧留一个小空隙。
• 将最后一个菜单项推到下一行。

这是 JQuery 解决方案吗？

.menu           {width: 1200px; margin: 0 auto;}
.menu li        {display: inline-block; margin: 0 0 0 36.7px; position: relative;}
.menu li:nth-of-type(1) {margin: 0;}

Answer 1

试试 display:flex。下面是一个例子

.menu {
  width: 1200px;
  margin: 0px;
  padding: 0px;
  background-color: palegreen;
  display: flex;
  flex-direction: row;
}
.menu li {
  list-style: none;
  flex: 1;
  background-color: orange;
  border: 1px solid green;
}

<div>
  <ul class="menu">
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
  </ul>
</div>