display：block-inline无法正常工作

Question

我已将colums的宽度设置为25％，但这些框仍未出现在一行中：

Answer 1

我看到你有一个像1px这样的右边框，默认情况下，你的宽度不算作宽度，因此，你的真实宽度是25％+ 1px。这就是为什么一行只能容纳3个盒子。

你需要添加：box-sizing: border-box;所以25％宽度计数边框，那么你现在每盒的真实宽度是25％。适合4排。

  

箱上浆

     

参考：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>