CSS：标准化一行中缩略图之间的间距

我有一个780px宽的容器，我想适合每行4个缩略图（我有多行）

如何标准化缩略图之间的间距，以便一行中的第一个和第四个缩略图粘贴到容器的“墙”上

我的代码：

<ul class="thumbnails">
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
   ...and so on
</ul>

图像
图像
图像
图像
图像
图像
图像
图像
等等

例如，如果需要在两个空间之间放置20px的空格，可以执行以下操作：

780-60=720

块可用空间

720/4=180

您的区块宽度

.thumbnails .card{
width:180px;
margin-left:20px;
}
.thumbnails .card:first-child{
margin-left:0px;
}

既然你已经编辑了你的问题，我建议每行有多个ul

如果你坚持要一个：

这可能会有帮助：

---

.thumbnails.card:first child，.thumbnails.card:nth child（n5）{

使用css3在每4个元素上剪切边距

li.card { 
  margin: 0 10px 10px 0;
}
li.card:nth-child(4n) {
  margin-right:0px;
}

---

请参阅此

此代码可能对您有所帮助。请在与缩略图宽度相关的容器中定义宽度

    #container {
    width:200px;
    }
    #container ul li{
    display:inline-block;
    }

检查这个

您可以通过第n个子Css选择器使用此操作。但Internet Explorer浏览器不支持此操作。 参考：

---

祝你好运。

@SamithaHewawasam我使用固定宽度和固定边距设置它，但第四个缩略图的右侧仍有一些空间。首先为你的缩略图分配一个类，最后给它们一个左边距/左边距0。然后给其他缩略图一个边距/左边距和/或右边距。我想你想要超过4。card ele在你的.thumbnails容器中，也就是说，有多个“行”？否则，在“.card”上使用右边距，然后在“.card”上使用零右边距。card:last-child”在第二行中，第一张卡不是第一个孩子是的，我认为它和原来的问题一样只有一行：）如果你使用

右边距
而不是
左边距
，y你可以得到同样的结果，而不需要第一个孩子