Question

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

我有一个section宽的容器600px，此部分将是容器产品列表。

每个产品都是100x100块，每个产品之间有margin 62px。

ul设置在display: inline-block上，因此它不会互相攻击。

现在在下面的笔示例中：http://codepen.io/anon/pen/yujLf 你可以看到我想做什么，你能看到第一排方块如何触摸容器的边框和然后下一个元素在哪？

img http://gyazo.com/948991c58a4edd54cf149c78d7db50d4.png

您可以看到它与宽度的完美对齐方式，因为每个元素之间的边距完全相等。

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

img http://gyazo.com/337100e784aac4785b1c53f54d7d84c3.png

我确实有一个解决方案，只需将margin-left更改为margin-right并为margin-right停用ul li:last-child。

但是，如果我这样做，我将无法将最后一个元素与边框对齐，就像我在第一个示例中所做的那样，看看：http://codepen.io/anon/pen/wdhrJ

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

是否可以使用ul实现我想要的内容？

Answer 1

如果您的容器固定为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;
}

我所做的就是在上述两个选择器中将margin-left更改为margin-right。我还将第二个选择器从first-child更改为nth-child，然后选择第4个元素和之后的每个第4个元素。

<强> CodePen Example

Answer 2

你试过这个黑客吗？ http://codepen.io/anon/pen/IgKtD

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:justify;
  vertical-align:top;
  font-size:0.001px;
}

ul::after {
  content:'';
  display:inline-block;
  width:100%;
  height:3px;
  background:blue;
}

ul li {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  box-shadow: inset 0 0 0 1px purple;
  margin:0 20px;
}

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

ul li:nth-child(4n-3) {
  margin-left:0;
}

CSS列表 - 将列表元素完美地对齐到宽度，它们之间具有相等的间隙

2 个答案: