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中的左边距离正如我所知，但是当下一个元素被强制转移到另一条线上时，如何阻止它添加边距？

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

这是一张目前正在发生的事情的图片，可以让您更好地了解：

Answer 1

不是在每个元素的左侧添加边距，而是向每边添加一半边距（完全删除 .box + .box选择器）：

.box {
    height: 300px;
    width: 23.5%;
    display: block;
    background: black;
    float: left;
    /* ADD HALF MARGIN ON EACH SIDE OF THE BOX */
    margin: 0 1%;
}

现在您将进行垂直对齐，但在容器的任一侧推入额外的1％。要纠正此问题，请将容器向左和向右拉出1％：

#box_container {
    height: auto;
    width: 100%;
    /* PULL THE SIDES OUT BY 1% TO NEGATE BOX MARGINS */
    margin: 0 -1%;
}

这应该达到你想要做的，而不需要每行定位特定数量的盒子。

Answer 2

您可以尝试使用2017-12-21T10:00:51.5955080Z {"@mt":"Error {@args}","@l":"Error","args":["args","31"]} css伪选择器删除nth-child。

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;
}

Answer 3

你可以这样做

<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>

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

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

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

Answer 4

使用边距而不是边距左边

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

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

或者在实际基本术语中，您可以使用：

.box:nth-child(5) {
    margin-left: 0%;
}

但是这段代码不是最优的......

正如 Bhuwan 所说，如果您不知道可能会得到多少输入，请使用此代替上面给出的静态值：

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

margin-right Codepen链接： https://codepen.io/anon/pen/JMEvmE

margin-left codepen link： https://codepen.io/anon/pen/LexmaL

jQuery图片加载问题

4 个答案: