html - jQuery 图片加载问题

Question

我想弄清楚如何防止新行上的框在第一个元素上缩进。

作为测试，我只是像这样在 html 中对框进行硬编码:

<ul id="box_container">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
</ul>

CSS:

#box_container {
    height: auto;
    width: 100%;
}

.box {
    height: 300px;
    width: 23.5%;
    display: block;
    background: black;
    float: left;
}

.box + .box {
    margin-left: 2%;
}

.box + .box 中的 margin-left 按我的意愿工作，但是当下一个元素被强制到另一行时，如何防止它添加边距？

我确实知道，如果这有什么不同的话，我只会每行显示四个框。我希望找到一种方法来做到这一点，而不必每 4 个元素将盒子元素包装在某种类型的 div 中，但如果这是唯一的方法，那么我想我别无选择。

这是目前正在发生的事情的图片，可以让大家有一个更好的主意:

Answer 1

您可以尝试使用 nth-child css 伪选择器来移除 margin-left。

.box:nth-child(4n+1) {
  margin-left: 0;
}

#box_container {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

.box {
  height: 100px;
  width: 23.5%;
  display: block;
  background: black;
  float: left;
  margin-bottom: 2%;
}

.box+.box {
  margin-left: 2%;
}

.box:nth-child(4n+1) {
  margin-left: 0;
}

body {
  margin: 0;
}

<ul id="box_container">
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>