575

W3 文档有一个以 为前缀的嵌套列表示例DEPRECATED EXAMPLE:，但他们从未使用非弃用示例对其进行更正，也没有准确解释该示例的错误之处。

那么这些方式中哪一种才是编写 HTML 列表的正确方式呢？

选项1：嵌套<ul>是父母的孩子<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

选项2：嵌套<ul>是<li>它所属的孩子

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>
4

7 回答 7

573

选项 2是正确的。

嵌套列表应该在嵌套列表的<li>元素内。

链接到 W3C Wiki on Lists（取自下面的评论）：HTML Lists Wiki。

链接到 HTML5 W3Cul规范：HTML5 ul。请注意，一个ul元素可能恰好包含零个或多个li元素。这同样适用于HTML5 ol。描述列表 ( HTML5 dl ) 类似，但同时允许dt和dd元素。

更多注意事项：

  • dl=定义列表。
  • ol= 有序列表（数字）。
  • ul= 无序列表（项目符号）。

官方W3C 链接（更新）。

于 2011-05-05T14:28:46.587 回答
70

选项 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

嵌套列表 - UL

于 2011-05-05T14:30:38.490 回答
42

选项 2 是正确的：嵌套<ul>是<li>它所属的子对象。

如果您验证，选项 1 会在 html 5 中出现错误——信用：user3272456

正确：<ul>作为孩子<li>

制作 HTML 嵌套列表的正确方法是将嵌套<ul>作为<li>其所属的子级。嵌套列表应该在嵌套列表的<li>元素内。

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

嵌套列表的 W3C 标准

一个列表项可以包含另一个完整的列表——这被称为“嵌套”一个列表。它对于目录之类的内容很有用，例如本文开头的内容：

  1. 第一章
    1. 第一节
    2. 第二节
    3. 第三节
  2. 第二章
  3. 第三章

嵌套列表的关键是记住嵌套列表应该与一个特定的列表项相关。为了在代码中反映这一点，嵌套列表包含在该列表项中。上面列表的代码如下所示：

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

注意嵌套列表是如何在<li>包含列表项的文本之后开始的（“第一章”）；然后</li>在包含列表项的 之前结束。嵌套列表通常构成网站导航菜单的基础，因为它们是定义网站层次结构的好方法。

从理论上讲，您可以嵌套任意数量的列表，尽管在实践中，将列表嵌套得太深会让人感到困惑。对于非常大的列表，最好将内容拆分为多个带有标题的列表，甚至将其拆分为单独的页面。

于 2015-05-05T22:52:51.453 回答
8

如果您 validate ，选项 1 在 html 5 中出现错误，因此选项 2 是正确的。

于 2014-02-04T19:52:51.637 回答
7

我更喜欢选项二，因为它清楚地将列表项显示为该嵌套列表的拥有者。我总是倾向于语义上合理的 HTML。

于 2011-05-05T14:30:52.723 回答
3

您是否考虑过使用标签“dt”而不是“ul”来嵌套列表？它继承的样式和结构允许您为每个部分设置一个标题，并且它会自动将里面的内容制成表格。

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>
于 2014-05-14T10:29:40.420 回答
-5

这里没有提到的是选项 1 允许您任意深度嵌套列表。

如果您控制内容/css，这无关紧要，但如果您正在制作富文本编辑器，它会派上用场。

例如，gmail、inbox 和 evernote 都允许创建如下列表：

任意嵌套列表

使用选项 2，您不能这样做（您将有一个额外的列表项），使用选项 1，您可以。

于 2016-06-30T02:05:40.143 回答