Question

我搜索了这个论坛，但没有找到任何解决方案。如果列表元素的内容进入第二行，我的WordPress博客列表不会正确缩进。我在stackoverflow How to keep indent for second line in ordered lists via CSS?上找到了一个修复程序，我实现了如下所示：

.entry ol,.entry li {
margin: 0; padding: 0;
}
.entry ol {
counter-reset: foo;
display: table;
}
.entry li {
list-style: none;
counter-increment: foo;
display: table-row;
}
.entry li::before {
content: counter(foo) ".";
display: table-cell;
text-align: right;
padding-right: .5em;
padding-left: .5em;
}
.entry ul li {
list-style: inside disc;
list-style-image: none;
line-height: 19px;
}

在上面的实现之后，我得到了我的列表的正确缩进，但是，每当我尝试使用无序时，它往往显示为有序列表。更糟糕的是，当我尝试使用和无序列表作为有序列表中的子列表时（事情变得疯狂），它看起来像是我的有序列表的延续而不是无序出现。请参阅我目前正在处理的博客中的示例：

http://www.medhealthng.com/abdominal-pain/

EDITED 我编辑我的代码看起来像这样：

.entry ol, .entry li {
    margin: 0;
    padding: 0;
}

.entry ol {
counter-reset: foo;
display: table;
margin-left: 1.3em;
margin-right: 1.3em;
line-height: 19px;
}
.entry li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}
.entry li::before {
    content: counter(foo)".";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
    padding-left: .3em;
}

但是下载列表仍然无法使用无序列表

Answer 1

::before标记内的li标记内容为counter(foo) "."。

只需使用其他内容：

.entry > li::before {
  content: counter(foo) ".";
  display: table-cell;
  text-align: right;
  padding-right: .5em;
  padding-left: .5em;
}

修改如果您希望您的子列表是无序列表，请在ul类中添加li标记（即unordered）并添加以下css：

.unordered > li::before { content: "."; display: table-cell; text-align: right; padding-right: .5em; padding-left: .5em; }

wordpress网站上的有序和无序列表问题（ul不工作）

1 个答案: