如何避免“盒子项目”包装内容？

Question

为什么我的包装盒包装好，我要与2px的左右两侧间距对齐，同时还要附上屏幕截图。谢谢

body { padding: 0 30px; }
.banner { background-color: #3b524c; height: 550px; }
.box ul { margin: 20px -2px 0 0; padding: 0; width: auto; }
.box ul li { width: 25%; margin-right: 2px; float: left; list-style: none; display: block; padding: 29px 0; font-size: 16px; line-height: 23px; text-transform: uppercase; background-color: #e57b76; color: #d8d8d8; text-align: center; }

<section class="banner"></section>
<section class="box">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</section>

Answer 1

因为数学。您不能有4倍width:25% AND 的保证金。总计超过100％。

使用calc更改宽度以调整多余边距。

body {
  padding: 0 30px;
}

.banner {
  background-color: #3b524c;
  height: 50px;
}

.box ul {
  margin: 20px -2px 0 0;
  padding: 0;
  width: auto;
}

.box ul li {
  width: calc(25% - 2px);
  margin-right: 2px;
  float: left;
  list-style: none;
  display: block;
  padding: 29px 0;
  fnt-size: 16px;
  line-height: 23px;
  text-transform: uppercase;
  background-color: #e57b76;
  color: #d8d8d8;
  text-align: center;
}

<section class="banner"></section>
<section class="box">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</section>

Answer 2

要获得以上图像，您只需添加一个

    display: flex;

到CSS中的“ ul”元素。但是，根据预期的行为，您可能不希望使用“ UL”。如果仅是这四个项目，则可能需要考虑使用“ div”代替。我也做了codepen来展示它与flex