3

我有一个ul元素和 5 个孩子<li>。

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

有<ul>一个display: flex属性。我尝试使用 calc 属性<li>来均匀调整列表项的大小：

calc:(100% / 5);

这给出了所需的结果并均匀地调整了 5<li>个块的大小

现在我在所有的右侧添加了边框，但最后一个子<li>元素。所以我从<ul>.

calc:((100% - 8px) / 5);

这也可以正常工作并均匀地调整<li>带有边框的块的大小。

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8px) / 5);
  height: 100%;
  border-right: 0.2px solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

现在我尝试在视口单位vw而不是 px 中设置边框宽度，但它给出了不同的结果。

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8vw) / 5);
  height: 100%;
  border-right: 0.2vw solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

从上面的代码片段可以看出，右边有一点空间。这会随着更宽的视口而变得更大（尝试查看片段完整页面）。所以我认为问题在于vw这里的单位和弹性盒。

那么这个错误的原因是什么？

编辑：

从提供的答案和评论中，我看到还有其他更合适的方法来实现我想要做的事情。我很欣赏这些答案，但这些不是我问题的答案。由于calc在这种情况下显示错误，因此当我尝试calc在其他情况下（不仅仅是边框）使用和视口单位时，很可能会导致更多问题。所以我需要知道原因并“ calc”修复。

4

3 回答 3

2

您无需执行 calc 即可为您的 li 添加内部内容。如果你给了 box-sizing: border-box;prop，border 和 padding 不会使容器变大。

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc(100% / 5);
  height: 100%;
  border-right: 2px solid black;
  background: blue;
  box-sizing: border-box;
}

li:last-child {
  border-right: none;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

于 2017-03-04T06:47:47.227 回答
0

看来您正在使用flex将lis分发到ul. 在这种情况下，您不需要calc计算宽度以使它们相等。这是flex应该做的。

看这个例子：

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, li { list-style: none; }
ul { width: 600px; height: 300px; background: red; display: flex; }
li {
  flex: 1 0 auto;
  border-right: 0.8vw solid black;
  background: blue;
}
li:last-child { border-right: none; }
<ul>
  <li></li><li></li><li></li><li></li><li></li>
</ul>

在容器上指定flexdsiplay 时，您只需对子项应用该flex属性，以使它们表现为灵活的项目。在您的特定用例中，您需要以下内容：

  1. flex-grow：设置为 1。这将允许您li增长以填充整个ul宽度。
  2. flex-shrink：设置为0。你不希望你li缩小。
  3. flex-basis: 设置为auto。你希望你li的自动增长到一个均衡的宽度。

所以，你看，你根本不需要calc。

您也无需专门申请display: block您li的 s。根据这里的规范：https ://www.w3.org/TR/css-flexbox-1/#flex-items

弹性项目的显示值是块化的：如果生成弹性容器的元素的流入子项的指定显示是内联级值，则计算为其块级等效值

正如@BoltClock 在评论中指出的那样，列表项已经被封锁。

边框

现在，来到边境。在您的第一个示例中，您已经指定了单位的宽度0.2px。这是没有意义的。尽管规格允许小数像素，但它会将其四舍五入到显示器上可用的最近像素，通常为 1。

在第二个示例中，您希望边框随视口缩放。那挺好的。没有问题0.8vw。

看看我在这个小提琴中发布的例子。调整结果窗口的大小，您将看到边框相对于视口大小发生变化。

最后，您可能想也可能不想设置box-sizing. 这取决于你的布局。无论您使用什么，您都始终如一地使用它。

于 2017-03-04T06:54:05.200 回答
0

像素 (px)：绝对像素。例如，20px 在任何屏幕上实际上都是 20 像素。如果监视器是 1980x1200，并且您将元素的高度设置为 200 像素，则该元素将占用 200 像素。

视口高度/宽度（vw/vh）：相对于视口的大小（基本上是浏览器窗口）。

1px = (100 / document.documentElement.clientWidth)vw 1px = (100 / 500) = 0.2vw

于 2017-03-04T08:02:58.223 回答