html嵌套有序列表的代码,Html有序列表1.1,1.2（嵌套计数器和范围）不起作用

Html有序列表1.1,1.2(嵌套计数器和范围)不起作用

我使用嵌套计数器和范围来创build一个HTMLsorting列表。

这是我的代码： http : //jsfiddle.net/qGCUk/2/

我期待以下结果：

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

相反，这是我所看到的(错误的编号) ：

1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 2.4 three 2.1 three.one 2.2 three.two 2.2.1 three.two.one 2.2.2 three.two.two 2.3 four

我没有线索，有没有人看到哪里出了问题？

取消select“正常化CSS” – http://jsfiddle.net/qGCUk/3/ CSS中使用的重置默认所有列表边距和填充为0

1. one
2. two
   1. two.one
   2. two.two
   3. two.three
3. three
   1. three.one
   2. three.two
      1. three.two.one
      2. three.two.two
4. four

使用此样式仅更改嵌套列表：

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

看一下这个 ：

你的问题似乎已经修复。

什么显示为我(在Chrome和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

我是怎么做到的

代替 ：

Item 1 Item 2

1. Subitem 1
2. Subitem 2

做：

Item 1 Item 2

1. Subitem 1
2. Subitem 2

这是一个很好的解决scheme！ 有了一些额外的CSS规则，你可以像一个MS Word大纲列表一样将其格式化为一个首行缩进：

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

我最近遇到类似的问题。 解决方法是将有序列表中的li项目的display属性设置为list-item，而不是display块，并确保ol的显示属性不是list-item。 即

li { display: list-item;}

有了这个，htmlparsing器将所有的li视为列表项并为其分配适当的值，并将ol视为基于您的设置的内嵌块或块元素，并且不会尝试将任何计数值分配给它。