html – CSS – Calc不准确

2023年3月31日 240次阅读

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

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

< ul>有一个显示：flex属性.
我尝试在< li>上使用calc属性.均匀调整列表项的大小：

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单元和flexbox.

So what is the cause of this error?

编辑：

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

最佳答案 您不需要执行计算来为您的li添加内部内容.如果你给box-sizing：border-box;道具,边框和填充物不会使容器增长.

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