正确的方法使HTML嵌套列表?

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>

当前回答

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

2014-02-04 19:52:51

其他回答

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

2011-05-05 14:30:52

您是否考虑过使用TAG“dt”而不是“ul”来嵌套列表?它的继承样式和结构允许你有一个标题每个部分，它自动制表的内容，进入。

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

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

2014-05-14 10:29:40

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

如果你控制的是content/css，这应该无关紧要，但如果你正在制作一个富文本编辑器，它就会派上用场。

例如，gmail, inbox和evernote都允许创建这样的列表:

选项2不能这样做(你会有一个额外的列表项)，而选项1可以。

2016-06-30 02:05:40

选项2

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

嵌套列表- UL

2011-05-05 14:30:38

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

2014-02-04 19:52:51

正确的方法使HTML嵌套列表?

推荐文章

最新文章

标签