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

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

您可以使用百分比宽度和百分比边距。假设我们希望每个项目有一个0.5% 右边距。有8个项目需要保证金；所以 8 x 0.5 等于 4%。所以这 4% 是留作保证金的，但在那之后我们还有 96% 可以使用。因此，将 96% 除以 9 个项目，每个项目的品牌为 10.66%。

.menu {
  width: 1200px;
  margin: 0 auto;
  list-style: none;
}

.menu li {
  float: left;
  width: 10.66%;
  margin-right: 0.5%;
  position: relative;
  background: #333;
  color: #fff;
  text-align: center;
}

.menu li.last {
  margin: 0;
}

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li class="last">9</li>
</ul>

与 CSS3 flex 相比，它的优势在于它几乎可以在任何浏览器上运行，尽管如果你支持它，由于亚像素渲染问题，你可能不得不在 IE7 中调整（向下舍入）宽度）。

Answer 2

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