Question

我正在使用ul / li创建wordpress类别的多列库视图。但是除了第一行之外的所有行都有一个左边距。

我看不出我做错了什么！

http://spirit.no/category/musikkanmeldelser/

我是否通过for循环解决了这个问题？

Answer 1

这是由CSS引起的：

.last-posts li:first-child {
  margin-left: 0px;
}

http://spirit.no/wp-content/themes/spirit/style.css第235行

使用此CSS覆盖margin-left元素的.last-posts li：

.last-posts li.the-post {
  width: 290px;
  min-height: 270px;
  float: left;
  margin-left: 15px;
  position: relative;
}

您可以删除:first-child CSS，或者在收到margin-left: 0px;的行上的每个帖子中添加一个类。这取决于你，有很多方法

Answer 2

这是因为您的图像上有左边距或填充。将其更改为右边的边距或边距，并确保将填充/边距宽度计入li元素的宽度：

.last-posts li.the-post {
    width: 290px;           <== subtract margin/padding width here
    min-height: 270px;
    float: left;
    margin-left: 15px;
    position: relative;
}

Answer 3

第一个列表项没有余量，因为该样式适用于该容器的:first-child。您可以使用

删除每三个列表项后的边距

.last-posts li:nth-child(3n+1) {
    margin-left: 0;
}

这将在三列中显示您的列表项，我假设您打算这样做。

Answer 4

在你的CSS中，你设置了左边距：

.last-posts li.the-post {
width: 290px;
min-height: 270px;
float: left;
margin-left: 15px;
position: relative;
}

间距偏移第一个后的每一行。

带有<li> </li>的多列列表

4 个答案: