html - 显示 :block-inline not working properly

Question

我已将列宽设置为 25%，但框仍然没有出现在一行中:

Answer 1

我看到你有一个像 1px 这样的右边框，默认情况下，你的宽度不计入宽度，因此，你的真实宽度是 25% + 1px。这就是为什么一排只能放 3 个盒子。

您需要添加:box-sizing: border-box; 所以 25% 宽度的边框也是如此，那么每个框的真实宽度现在是 25%。一排放 4 个。

box-sizing

REF: https://developer.mozilla.org/en/docs/Web/CSS/box-sizing?v=example

例子:

span {
  width: 25%;
  display: inline-block;
  border-right: 1px solid red;
  background: lightgray;
}


.test2 span {
  width: 25%;
  display: inline-block;
  border-right: 1px solid red;
  background: lightgray;
  box-sizing: border-box;
}

<div class="test1">
<span>111</span><span>222</span><span>333</span><span>444</span>
</div>

<br><br>

<div class="test2">
<span>111</span><span>222</span><span>333</span><span>444</span>
</div>