div容器在下一行中推送了第6个元素

Question

我想创建一个包含6个图像的div容器。这是一张图片：

在这个容器中应该有超过6个图像，所以我在css中使用了:nth-child()选择器。我的问题是，第6张图像被推到下一行，我不知道为什么。

以下是代码：

*{
  margin: 0px;
  padding: 0px;
}

div{
  width: 750px;
  background-color: grey;
}

div > a{
  display: inline-block;
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
  margin-right: 6px;
}

div > a:nth-child(6n){
  margin-right: 6px;
}

div > a > img{
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
}

<div>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
</div>

这是JSFiddle

Answer 1

这是空白边距问题+您的CSS规则div > a:nth-child(6n)

Src：https://davidwalsh.name/remove-whitespace-inline-block

同样使用div > a:last-child可以让您拥有任意数量的项目，并始终以最后一个为目标。

*{
  margin: 0px;
  padding: 0px;
}

div{
  width: 750px;
  background-color: grey;
}

div > a {
  display: inline-block;
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
  margin-right: 6px;
}

div > a:last-child {
  margin-right: 0px;
}

div > a > img{
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
}

<div>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
</div>

flex将是今天解决它的推荐方法，因为所有主流/较新的浏览器都支持它。

*{
  margin: 0px;
  padding: 0px;
}

div{
  width: 750px;
  background-color: grey;
  display: flex;
}

div > a {
  display: inline-block;
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
  margin-right: 6px;
}

div > a:last-child {
  margin-right: 0px;
}

div > a > img{
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
}

<div>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
</div>

Answer 2

请更改div宽度，如下所示：

KitapData