W3文档有一个前缀为DEPRECATED example:的嵌套列表示例,但他们从未用一个非DEPRECATED示例来纠正它,也没有确切地解释这个示例的错误所在。

那么,下面哪种方法是编写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>

当前回答

您是否考虑过使用TAG“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>

其他回答

选项2是正确的:嵌套的<ul>是它所属的<li>的子元素。

如果您验证,选项1在html 5中出现错误——credit: user3272456


正确:<ul>作为<li>的子

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

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

嵌套列表的W3C标准

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

第一章 一个节 第二部分 第三节 第二章 第三章

嵌套列表的关键是要记住,嵌套列表应该与一个特定的列表项相关。为了在代码中反映这一点,嵌套列表包含在该列表项中。上面列表的代码看起来像这样:

<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>和包含列表项的文本之后开始的(“Chapter One”);然后在包含列表项的</li>之前结束。嵌套列表通常构成网站导航菜单的基础,因为它们是定义网站层次结构的好方法。

理论上,您可以嵌套尽可能多的列表,尽管在实践中,嵌套列表太深可能会令人困惑。对于非常大的列表,最好将内容分成几个带有标题的列表,甚至将其分成单独的页面。

您是否考虑过使用TAG“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>

如果验证,选项1在html 5中出现错误,因此选项2是正确的。

我更喜欢选项二,因为它清楚地显示列表项是嵌套列表的所有人。我总是倾向于语义健全的HTML。

选项2

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

嵌套列表- UL