1

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

我看不出我做错了什么！

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

我有没有用 for 循环解决这个问题？

4

4 回答 4

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-childCSS 或在每个帖子中添加一个类，首先在接收margin-left: 0px;. 这取决于你，有很多方法

于 2012-10-04T20:42:58.990 回答
0

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

.last-posts li.the-post {
    width: 290px;           <== subtract margin/padding width here
    min-height: 270px;
    float: left;
    margin-left: 15px;
    position: relative;
}
于 2012-10-04T20:43:39.330 回答
0

:first-child由于适用于该容器的样式，第一个列表项没有边距。您可以在每第三个列表项之后删除边距

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

这将在三列中显示您的列表项，正如我假设您想要的那样。

于 2012-10-04T20:45:11.390 回答
0

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

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

间距在第一行之后偏移每一行。

于 2012-10-04T20:57:48.953 回答