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

Question

我使用嵌套计数器和范围来创建有序列表:

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/ 使用的CSS重置默认所有列表边距和填充为0

更新 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

我认为这些答案使问题过于复杂化。如果您不需要支持 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>

有关更多信息，请参阅MDN CSS 参考网站上的::markerCSS 伪元素页面和使用 CSS 计数器页面。

Answer 5

这是一个很好的解决方案!使用一些额外的CSS规则,您可以将其格式化,就像MS Word大纲列表中挂起的第一行缩进:

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

Answer 6

把事情简单化！

\n

这是一个更简单和标准的解决方案，用于增加数字并保留末尾的点。
\n即使你的 CSS 正确，如果你的 HTML 不正确，它也不会工作。见下文。

\n

CSS

\n

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

\n

萨斯

\n

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

\n

HTML 父子

\n

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

\n

无法工作 \xe2\x9c\x98

\n

注意家长li和孩子ol li是单独的，这是行不通的。

\n

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

\n

将工作 \xe2\x9c\x94

\n

您需要将ol li子元素放置在parent 中li。通知家长li正在拥抱孩子。

\n

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

\n