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;，宽度和高度属性（以及最小/最大属性）包括内容、内边距和边框，但不包括边距。

2) width: calc(25% - 10px); 你使用 margin:5px 所以必须减去 10px 以获得宽度：25% 的 (margin-left:5) and (margin-right:5)。

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>

Answer 2

尝试计算出的宽度：width: calc(25% - 30px)

Answer 3

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

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Answer 4

您可以使用flex 来解决它（我建议您在css-tricks.com 上阅读它）。 flex 所做的是分配项目并考虑边距。基本上你甚至不需要使用宽度，而是使用flex-basis。使用 border-box (read about it) 将计算您添加到 li 的填充 + 边框到总宽度，所以它不会是 25% + 20px 但 25% 包括 20px，如果这有意义吗？

DEMO

<ul class="list">
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">3</li>
  <li class="list__item">4</li>
</ul>

.list {
  display: flex;
  width: 100%;
  background-color: lightcoral;
  justify-content: center;
  align-content: center;
}

.list__item {
  list-style-type: none;
  box-sizing: border-box;
  display: block;
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
  flex-basis: 25%
}