HTML目录中的错误编号

Question

我正在尝试在文件中使用HTML编写目录。 目录中出现的编号有缺陷。 如何修改以下CSS和HTML以便Output中的第四个项目符号是4而不是3.4 ？

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

 <ol> <li> <a href="#lorem_ipsum">lorem ipsum</a> </li> <li> <a href="#set">Set</a> </li> <li> <a href="#title">Title</a> </li> <ol> <li> <a href="#Class">Class</a> </li> <li> <a href="#Something">Something</a> </li> <li> <a href="#action">Action</a> </li> </ol> <li> <a href="#table_of_references">Table of References</a> </li> </ol> 

产量

1. Lorem Ipsum
2. Set
3. Title
    3.1. Class
    3.2. Something
    3.3. Action
3.4. Table of References

Answer 1

正如评论所说（@Jon P）：您的HTML无效。 你不能有ol作为嫡系ol ，它需要在一个包裹li 。

要正确嵌套列表，只需将sub ol移到第3个li内，请检查以下示例：

参考： https : //developer.mozilla.org/en/docs/Web/HTML/Element/ol

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

 <ol> <li> <a href="#lorem_ipsum">lorem ipsum</a> </li> <li> <a href="#set">Set</a> </li> <li> <a href="#title">Title</a> <ol> <li> <a href="#Class">Class</a> </li> <li> <a href="#Something">Something</a> </li> <li> <a href="#action">Action</a> </li> </ol> </li> <li> <a href="#table_of_references">Table of References</a> </li> </ol> 

Answer 2

您在标题后过早关闭LI标签-将其移动到OL部分下方，如下所示：

<ol>
  <li>
    <a href="#lorem_ipsum">lorem ipsum</a>
  </li>
  <li>
    <a href="#set">Set</a>
  </li>
  <li>
    <a href="#title">Title</a>
  <ol>
    <li>
      <a href="#Class">Class</a>
    </li>
    <li>
      <a href="#Something">Something</a>
    </li>
    <li>
      <a href="#action">Action</a>
    </li>
  </ol>
  </li>
  <li>
    <a href="#table_of_references">Table of References</a>
  </li>
</ol>