HTML有序列表1.1，1.2（嵌套计数器和范围）不工作HTML有序列表1.1，1.2（嵌套计数器和

我使用嵌套计数器和范围，以创建一个有序列表：

 ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: 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>

我期待以下结果：

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 <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

我不知道，没有人看到它错在何处？

这里是一个的jsfiddle： http://jsfiddle.net/qGCUk/2/

Answer 1:

取消“CSS正常化” - http://jsfiddle.net/qGCUk/3/使用，默认所有的列表边距和补0的CSS重置

UPDATE 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>

Answer 2:

使用这种风格只改变嵌套列表：

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Answer 3:

看一下这个：

http://jsfiddle.net/PTbGc/

你的问题似乎已得到修复。

显示的内容，我（在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

我是如何做到的

代替：

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

这样做：

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

Answer 4:

这是一个很好的解决方案！随着一些额外的CSS规则，你可以格式化，就像一个悬首行缩进一个微软Word大纲列表：

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