html - 4 项 - 每项 25% - 带边框和边距

Question

所以，我在网上搜索了一下，发现有一些相似但又不完全相同的问题。

我有某种列表，我想以表格形式显示，我想使用它所在的父 DIV 的整个宽度(所以 100%)。我想每行显示 4 个元素，并使用类似 thias 的东西:

ul.li{
 list-style-type: none;
 float: left;
 display: box;
 border: 1px solid black;
 margin: 5px;
 padding: 10px;
 width: 25%
}

即使不是数学家也能看出这里有什么问题:25% * 4 是 100，但加上边框和边距，总数超过 100。所以结果是每行只有 3 个列表项，并且比父 div 的总宽度小很多。

我试过使用表格而不是列表项，它更容易获得准确的 100% 宽度，但它不适用于我页面的其余部分，因为它不那么灵活，这不是我需要的.

我可以将边框放在框内，这解决了边框问题，但我需要列表项框之间的边距(空白)。

Answer 1

1) box-sizing: border-box;, the width and height properties (and min/max properties) includes content, padding and border, but not the margin.

2) width: calc(25% - 10px); you use of margin:5px so must subtract 10px for (margin-left:5) and (margin-right:5) of width:25% .

ul li{
 box-sizing: border-box;
 list-style-type: none;
 border: 1px solid black;
 float: left;
 margin: 5px;
 padding: 10px;
 width: calc(25% - 10px);
}

ul li{
 box-sizing: border-box;
 list-style-type: none;
 border: 1px solid black;
 float: left;
 margin: 5px;
 padding: 10px;
 width: calc(25% - 10px);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>