Html CSS列表-将列表元素完美地对齐到宽度中，并且它们之间的间距相等

让我们保持简单和简短，我已经为我的问题做了两个虚拟的例子

我有一个容器

部分

，它是

600px

宽，这个部分将包含产品的容器列表

每个产品是一个100x100块，每个产品之间有一个

62px

的

margin

ul

设置在

display:inline block

上，因此它不会一个接一个

现在，在下面的示例中： 你可以看到我想做什么，你可以看到第一排正方形是如何接触到容器的边界，然后下一个元素进入到下面吗

（来源：）

您可以看到它是如何完美地对齐宽度的，因为每个元素之间有一个完全相等的边距

现在这个解决方案是个问题，因为现在第二行的左侧将有额外的边距：

（来源：）

我确实有一个解决方案，只需将

marginleft

更改为

marginright

，并禁用

ulli:last child的
marginright

但如果我这样做，我将无法将最后一个元素与边框对齐，就像我在第一个示例中所做的那样，请看：

如您所见，我必须将
margin
更改为
40px
，而不是
62px
，使其每行4个元素

是否可以使用
ul
实现我想要的功能？
您是否尝试过这种破解方法

你试过这个黑客吗

如果您的容器固定在600px，则以下解决方案将起作用：

ul li {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-right: 62px;
    display: inline-block;
}

ul li:nth-child(4n+4) {
    margin-right: 0;
}

我所做的是将上述两个选择器中的
marginleft
更改为
marginright
。我还将第二个选择器从
first child
更改为
nth child
，以选择第四个元素以及之后的每四个元素

如果您的容器固定在600px，则以下解决方案将起作用：

ul li {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-right: 62px;
    display: inline-block;
}

ul li:nth-child(4n+4) {
    margin-right: 0;
}

我所做的是将上述两个选择器中的
marginleft
更改为
marginright
。我还将第二个选择器从
first child
更改为
nth child
，以选择第四个元素以及之后的每四个元素

为什么不能将其更改为右边距：21px；而不是右边的边距：40px；？请参阅：@Mastrianni，因为根据我的设计，每行应该只有4个块，最后一个元素必须在容器的末尾。您可以使用CSS3来完成此操作：第n个孩子可以在末尾加上数学，这样css只影响第4个孩子；而不是右边的边距：40px；？请参阅：@Mastrianni，因为根据我的设计，每行应该只有4个块，最后一个元素必须在容器的末尾。您可以使用CSS3来完成此操作：第n个孩子可以在后面加上数学，这样css只影响第4个孩子。你能解释一下4n的意思吗？真棒的解决方案@BenBeri
nth child
是一个数学伪选择器，其工作原理与
first child
类似，只是您可以自定义数学和编号。除了Mastrianni的链接，还可以在Mozilla开发者网络（一个不可或缺的工具）上查找第n个孩子。tl；dr
4n
的基本意思是“选择元素编号4”和
+4
的意思是“然后再选择第四个元素”。@TylerH哦，不错，这是一种非常聪明的技术@BenBeri注意到IE8不支持第n个子项，但IE9+确实支持它（以防您的工作需要超级遗留支持）。@TylerH在这种情况下谁关心IE8？：D谢谢！你能解释一下4n是什么意思吗？真棒的解决方案@BenBeri
nth child
是一个数学伪选择器，其工作原理与
first child
类似，只是您可以自定义数学和编号。除了Mastrianni的链接，还可以在Mozilla开发者网络（一个不可或缺的工具）上查找第n个孩子。tl；dr
4n
的基本意思是“选择元素编号4”和
+4
的意思是“然后再选择第四个元素”。@TylerH哦，不错，这是一种非常聪明的技术@BenBeri注意到IE8不支持第n个子项，但IE9+确实支持它（以防您的工作需要超级遗留支持）。@TylerH在这种情况下谁关心IE8？：D谢谢！