如何在内容列表中创建小节？答案

【问题标题】：How can I make subsections in a Contents list?如何在内容列表中创建小节？
【发布时间】：2016-03-05 17:43:33
【问题描述】：

我正在尝试在我的文章页面上创建一个内容列表，但我的验证器一直告诉我 <ol> 和 <ul> 不能是另一个 <ol> 或 <ul> 的子元素。

有什么方法可以在内容中启用此功能而我的编码不会出错？

我当前的标记是这样的：

<!DOCTYPE html>
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <h2>Contents</h2>
    <div>
        <ol>1
            <ol>1.1
            </ol>
            <ol>1.2
            </ol>
            <ol>1.1.1
            </ol>
        </ol>
    </div>
</body>
</html>

谢谢，迈克

【问题讨论】：

你真的需要了解有序列表。您的标记肯定是无效的。 ol 用作容器。您需要在此容器中包含 li 以获取不同的内容。您应该关闭您使用的每个 ol 和每个 li。见w3schools.com/tags/tag_ol.asp

标签： html css tableofcontents

【解决方案1】：

您的<ol> 只是声明了一个新有序列表的开始，因此您希望将列表中的任何内容放入列表项<li>。

<!DOCTYPE html>
<head>
  <title></title>
  <meta charset="UTF-8">
</head>
<body>
  <h2>Contents</h2>
  <div>
    <ol>
      <li>1</li>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.1.1</li>
    </ol>
  </div>
</body>
</html>

或者，您可以使用<ul> 代替<ol> 来获取项目符号列表而不是编号。

【讨论】：

【解决方案2】：

每个ol 元素只能包含li 标签。 如果你想嵌套列表你必须使用这个结构：

<!DOCTYPE html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
    <h2>Contents</h2>
    <div>
        <ol>
            <li>
                <span>1</span>      
                <ol>
                    <li>1.1</li>
                    <li>1.2</li>
                    <li>
                        <ol>
                            <li>1.2.1</li>
                            <li>1.2.2</li>
                        </ol>
                    </li>
                    <li>1.3</li>
                </ol>
            <li>
            <li>
                <span>2</span>      
                <ol>
                    <li>2.1</li>
                    <li>2.2</li>
                    <li>2.3</li>
                </ol>
            </li>
        </ol>
    </div>
</body>
</html>

【讨论】：

谢谢，现在看起来好多了。唯一的问题是 1 下的项目有数字，但 2 下的类别没有数字。知道如何解决这个问题吗？
只需重复结构...规则始终是 li 的内部 ol。但是在 li 里面你可以放任何你想要的东西，因为它的行为就像一个 div。无论如何，如果您使用的是 ol，您应该自动获取数字，不是吗？
是的，我复制了这些步骤，我的数字会自动出现，但是项目 1.、5. 和 6. 后面是空格，而 2.、3.、4.、1.1 和 1.2，（在第一小节中）和 1.1.1（在第二小节中）有标题。我的验证器也给了我未关闭元素的错误
什么是 CodePen 和 Fiddle？
codepen.io/anon/pen/ZQzbKL 是我在名为 CodePen 的在线编辑器中的代码，您可以在那里进行测试，保存更改并将链接发布到新版本...