1

我最近购买了这个主题。我想通过在主页中显示项目来自定义主题文件，即帖子列表出现是四个，我想做的是连续三个。是否可以使用 css 或 jquery 来做到这一点。这是主题的链接在主页中您可以看到帖子为四个（我希望它是三个） 这是链接

是否可以使用 css 将列表设为三个？

4

4 回答 4

1

您需要更改您的 CSS 类来实现这一点。

例如，

.articles li {
    float: left;
    margin: 0 3px 5px 1px;
    min-height: 210px;
    padding: 7px;
    position: relative;
    text-align: left;
    width: 310px; /* This has to be increased */
}

希望这可以帮助。

于 2013-10-03T13:38:58.143 回答
1

项目 1：要限制每行显示的块数，请增加每个项目的宽度，如下所示：

.articles li {
    padding: 7px;
    width: 30%; /*This can be in px also. If in px give a value roughly above 290px. */
    text-align: left;
    position: relative;
    float: left;
    min-height: 210px;
    margin: 0 3px 5px 1px;
}

第 2 项：要在每个块中居中图像，添加margin如下：

.articles .thumb {
    width: 228px;
    height: 108px;
    margin: 0px auto; /*added this line to center image horizontally.*/
}
于 2013-10-03T13:46:36.480 回答
0

现代方法可能是：

.articles li {
  padding: 7px;
  width: 308px;
  text-align: left;
  position: relative;
  float: left;
  min-height: 210px;
  margin: 0 9px 9px 0;
}
.articles li:nth-child(3n) {margin-right:0;}

这会给你这个： 结果

如果你想让它与旧版浏览器兼容，请使用这个小的 jQuery 片段：

$(".articles li:nth-child(3n)").css("margin-right", 0);
于 2013-10-03T13:45:34.347 回答
0

您必须尝试添加：

.articles li:nth-child(n) {
   margin-left: 30px;
   margin-right: 50px;
}

它给你的结果是这样的：在此处输入图像描述

于 2013-10-03T14:00:43.577 回答