display:block-inline无法正常工作

我已将colums的宽度设置为25%,但框仍未出现在一行中:

我看到你有一个像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;
}

111222333444







111222333444