CSS - Calc inaccuracy
我有一个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> |
-
具有
-
块的大小
现在，我在所有元素的右侧添加了边框，但最后一个子元素
-
却添加了边框。因此，我从
这也可以正常工作，并使用边框均匀地调整
-
块的大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21ul {
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;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>现在，我尝试在视口单位
vw 中设置边框宽度，而不是px，但结果却有所不同。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21ul {
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;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>从上面的代码片段中可以看到，右边有一些空间。视口越宽，它就会变得越大(尝试查看摘要页面)。所以我认为问题出在
vw 单位和flexbox上。So what is the cause of this error?
编辑：
从提供的答案和评论中，我已经看到还有其他更合适的方法可以实现我想做的事情。我很欣赏这些答案，但不是我的问题的答案。由于
calc 在这种情况下显示错误，因此在其他情况下(不仅是边框)尝试使用calc 和视口单位时，很可能会引起更多问题。因此，我需要知道原因和"calc "修复程序。
您无需进行计算即可为li添加内部内容。如果提供
box-sizing: border-box; 道具，则边框和填充将不会使容器增大。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22ul {
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;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
像素(px)：绝对像素。因此，例如20px在任何屏幕上实际上都是20个像素。如果监视器的分辨率为1980x1200，并且您将元素的高度设置为200px，则该元素将占用200像素。
视口的高度/宽度(vw / vh)：相对于视口的大小(基本上是浏览器窗口)。
1px =(100 / document.documentElement.clientWidth)vw
1像素=(100/500)= 0.2vw
似乎您正在使用
flex 将li 分发到您的ul 内部。在这种情况下，您无需calc 计算宽度即可使宽度相等。这就是flex 应该做的。请参阅以下示例：
1
2
3
4
5
6
7
8
9* { 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; }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>在容器上指定
flex dsiplay时，只需在子项上应用flex 属性，以使它们表现为灵活项。在您的特定用例中，您需要以下内容： -
flex-grow ：设置为1。这将使您的li 增长为填充整个ul 宽度。 -
flex-shrink ：设置为0。您不希望li 缩小。 -
flex-basis ：设置为auto 。您希望您的li 自动增长到相等的宽度。
我尝试在
1 | calc:(100% / 5); |
这样可以提供所需的结果，并均匀分配5个
因此，您看到根本不需要
您也不必专门将
The display value of a flex item is blockified: if the specified
display of an in-flow child of an element generating a flex container
is an inline-level value, it computes to its block-level equivalent
正如@BoltClock在注释中指出的那样，列表项已被阻塞。
边框
现在，来到边界。在第一个示例中，您以
在第二个示例中，您希望边框随着视口缩放。那很好。
请看我在这个小提琴中发布的示例。调整结果窗口的大小，您将看到边框相对于视口大小发生变化。
最后，您可能会或可能不想设置