小开

最佳答案

取消选中“标准化 CSS”-< a href = “ http://jsfiddle.net/qGCUk/3/”rel = “ norefrer”> http://jsfiddle.net/qgcuk/3/ 用于默认所有列表边距和填充为0的 CSS 重置

更新 http://jsfiddle.net/qGCUk/4/-你必须在你的主 <li>中包括你的子列表

ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}

<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>

小开

看看这个:

Http://jsfiddle.net/ptbgc/

你的问题似乎已经解决了。

What shows up for me (under Chrome and Mac OS X)

1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four

我怎么做到的

而不是:

<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>

Do :

<li>Item 1</li>
<li>Item 2
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>

小开

这是一个伟大的解决方案！有了一些额外的 CSS 规则，你可以像一个悬挂的第一行缩进的 MS Word 大纲列表那样格式化它:

OL {
counter-reset: item;
}
LI {
display: block;
}
LI:before {
content: counters(item, ".") ".";
counter-increment: item;
padding-right:10px;
margin-left:-20px;
}

小开

使用此样式只更改嵌套列表:

ol {
counter-reset: item;
}


ol > li {
counter-increment: item;
}


ol ol > li {
display: block;
}


ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}

小开

我最近也遇到过类似的问题。修复方法是将已排序列表中 li 项的 display 属性设置为 list-item，而不是 display 块，并确保 ol 的 display 属性不是 list-item。也就是说

li { display: list-item;}

使用这种方法，html 解析器将所有 li 视为列表项，并为其赋予适当的值，将 ol 视为基于设置的内联块或块元素，并且不尝试为其赋予任何 count 值。

小开

摩西的解决方案是伟大的，但问题可能仍然存在，如果你需要把列表内的 div。(阅读: 嵌套列表上的 CSS 计数器复位)

这种风格可以防止这个问题:

ol > li {
counter-increment: item;
}


ol > li:first-child {
counter-reset: item;
}


ol ol > li {
display: block;
}


ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}

<ol>
<li>list not nested in div</li>
</ol>


<hr>


<div>
<ol>
<li>nested in div</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
</div>

还可以在 li:before上设置复位。

小开

在浏览了其他答案之后，我得出了这个结论，只需将类 nested-counter-list应用到根 ol标签:

高级代码:

ol.nested-counter-list {
counter-reset: item;


li {
display: block;


&::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
}


ol {
counter-reset: item;


& > li {
display: block;


&::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
}
}
}

Css 代码 :

ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
ol.nested-counter-list ol > li {
display: block;
}
ol.nested-counter-list ol > li::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}

ol.nested-counter-list {
counter-reset: item;
}


ol.nested-counter-list li {
display: block;
}


ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}


ol.nested-counter-list ol {
counter-reset: item;
}


ol.nested-counter-list ol>li {
display: block;
}


ol.nested-counter-list ol>li::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}

<ol class="nested-counter-list">
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>

And if you need trailing . at the end of the nested list's counters use this:

ol.nested-counter-list {
counter-reset: item;
}


ol.nested-counter-list li {
display: block;
}


ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}


ol.nested-counter-list ol {
counter-reset: item;
}

<ol class="nested-counter-list">
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>

小开

保持简单！

这是一个简单和标准的解决方案，以增加数量和保留点在结束。
即使你得到了正确的 CSS，如果你的 HTML 不正确，它也不会工作。

CSS

ol {
counter-reset: item;
}
ol li {
display: block;
}
ol li:before {
content: counters(item, ". ") ". ";
counter-increment: item;
}

SASS

ol {
counter-reset: item;
li {
display: block;
&:before {
content: counters(item, ". ") ". ";
counter-increment: item
}
}
}

HTML 亲子档

如果添加子元素，请确保它位于父 li之下。

不会起作用

注意，父 li和子 ol li在这里是单独的，这样不起作用。

<ol>
<li>Parent 1</li> <!-- Parent has open and close li tags -->
<ol>
<li>Child</li>
</ol>
<li>Parent 2</li>
</ol>

将工作 something

You need to place the ol li child element inside parent li. Notice the parent li is hugging the child.

<ol>


<li>Parent 1 <!-- Parent open li tag -->
<ol>
<li>Child</li>
</ol>
</li> <!-- Parent close li tag -->


<li>Parent 2</li>
</ol>

小开

Thank you everyone above for their answers!

As I needed RTL solution, I found out that this can solve it:

ol.nested-counter-list li {
display: block;
unicode-bidi: bidi-override;
}

因此，您可以使用上面的任何解决方案，但是也可以为 RTL 用例更新特定的 CSS 选择器。

小开

我觉得这些答案把问题复杂化了。如果你不需要支持 Internet Explorer，那么解决方案就是一句俏皮话:

ol > li::marker { content: counters(list-item, '.') '. '; }

<ol>
<li>one</li>
<li>two</li>
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
<li>four</li>
</ol>

See the CSS 伪元素页 and the 使用 CSS 计数器页面 on MDN's CSS reference website for more information.

HTML 有序列表1.1,1.2(嵌套计数器和作用域)不工作