首页 文章

正确的方法来制作HTML嵌套列表？

提问于
浏览 次
455

W3文档的前缀为 DEPRECATED EXAMPLE: ，但它们从未使用未弃用的示例进行更正，也未解释该示例的确切错误 .

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

Option 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>

Option 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>
html html-lists nested-lists

7 回答

  • 460

    Option 2 是正确的 .

    嵌套列表应该是嵌套列表的 inside a <li> element .

    链接到列表中的W3C Wiki（摘自下面的评论）：HTML Lists Wiki .

    链接到HTML5 W3C ul 规范：HTML5 ul . 请注意， ul 元素可能包含零个或多个 li 元素 . 这同样适用于HTML5 ol . 描述列表（HTML5 dl）类似，但允许 dt 和 dd 元素 .

    更多说明：

    • dl =定义清单 .

    • ol =有序列表（数字） .

    • ul =无序列表（项目符号） .

    回复于
  • 26

    选项2

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

    Nesting Lists - UL

    回复于
  • 7

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

    从理论上讲，您可以根据需要嵌套尽可能多的列表，但实际上嵌套列表可能会让人感到困惑 . 对于非常大的列表，您可能最好将内容拆分为多个带有 Headers 的列表，或者甚至将其拆分为单独的页面 .

    回复于
  • 2

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

    回复于
  • -4

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

    回复于
  • 54

    您是否考虑过使用TAG“dt”而不是“ul”来嵌套列表？它的继承风格和结构允许您为每个部分创建一个 Headers ，并自动将内容列表 .

    <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>
    回复于
  • 6

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

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

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

    arbitrarily nested list

    使用选项2，你不能（你将有一个额外的列表项），选项1，你可以 .

    回复于

相关问题