html - wordpress 网站上的有序和无序列表问题(ul 不工作)

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/

已编辑我将代码编辑为如下所示:

.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

li 标签内的 ::before 标签有一个 counter(foo) "." 内容。

只需为它使用另一个内容:

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

编辑如果你希望你的子列表是一个无序列表，给 li 中的 ul 标签一个类(即 unordered)并添加以下 css:

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