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

试试content: '<div class="' + '#=getClass(data.value)#' + '">#=data.value #</div>'。以下是一个例子

＆＃13;

display:flex

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

这相对于CSS3 flex的优势在于它几乎适用于任何浏览器，尽管你可能不得不调整（向下舍入）IE7中的宽度，因为如果你支持它则会出现亚像素渲染问题。 / p>

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

2 个答案: