Question

这是一个JSFiddle：http://jsfiddle.net/g5b6xyjw/

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1%;
}

.col:first-child {
  margin-left: 0;
}

.c1-4 {
  width: 23.8%;
  height: 90px;
  background-color: #fff;
}

<div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
</div>

每次以新行开头我都希望它没有左边距。

我已经使用了：nth-child（5n），但只删除了一行。

可能是什么解决方案？

Answer 1

您可以使用nth-child(4n + 1)，这将是每个第4个元素+ 1，这将是每行的第一个元素。

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1%;
  box-sizing: border-box;
  background: lightblue;
}
.c1-4 {
  width: 23.8%;
  height: 90px;
}
.col:nth-child(4n + 1) {
  margin-left: 0;
  border: 1px solid red;
}

<div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
  <div class="col c1-4"></div>
</div>

如何用css从每个第n个元素中删除左边距

1 个答案: