如何使列表项连续三次

Question

我最近购买了这个主题。我想自定义主题文件，显示主页中的项目，即帖子列表出现是四个，我想做的是连续三个。是否可以使用css或jquery执行此操作。 这是主题的链接 在主页上你可以看到帖子为四（我希望它是三个） Here is the link

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

Answer 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 */
}

希望这有帮助。

Answer 2

第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.*/
}

Answer 3

现代方法可以是：

.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);

Answer 4

您必须尝试添加：

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

它会给你这样的结果：