2

我正在尝试在文件中使用 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
4

2 回答 2

5

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

要正确嵌套列表，只需将 sub 移动ol到第三个 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>

于 2017-05-25T23:12:25.503 回答
1

您在 Title 之后过早地关闭了 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>
于 2017-05-25T23:17:18.360 回答