ul 中 ul 的正确语义答案

【问题标题】：correct semantics for ul in ulul 中 ul 的正确语义
【发布时间】：2012-08-21 04:14:57
【问题描述】：

我在ul 内写ul 来制作手风琴式菜单。但是当我在 html 验证器中检查下面的代码时，它给了我这些错误

Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

在这种情况下，如何为 ul 编写语义正确的 html？

这是我的html

<nav class="row">
            <ul class="menu">
                <li>
                    <a href="">Uutiset</a>
                </li>
                <ul class="inside">
                    <li><a href="">Fringilla Condimentum</a></li>
                    <li><a href="">Lorem</a></li>
                    <li><a href="">Fringillau</a></li>
                    <li><a href="">Curabitur</a></li>
                    <li><a href="">Mollis</a></li>
                    <li><a href="">Ipsum</a></li>
                    <li><a href="">Lorem</a></li>
                    <li><a href="">Fringillau</a></li>
                    <li><a href="">Curabitur</a></li>
                    <li><a href="">Mollis</a></li>
                    <li><a href="">Ipsum</a></li>
                </ul>
                <li><a href="">Foorumi</a></li>
                <li><a href="">Kauppa</a></li>
                <li><a href="">Messut</a></li>
                <li>
                    <a href="">Asiakaspalvelu</a>
                </li>
                <ul class="inside">
                    <li><a href="">Tilaa lehti</a></li>
                    <li><a href="">Muutos tilaukseen</a></li>
                    <li><a href="">Lähetä uutisvinkki</a></li>
                    <li><a href="">Anna palautetta</a></li>
                </ul>
                <li><a href="">Nakoislehti</a></li>
                <li><a href="">Nae meidat</a></li>
            </ul>
        </nav>

【问题讨论】：

错误信息不是关于语义，而是纯粹关于语法。

标签： html

【解决方案1】：

您必须用LI 包裹每个内部ULs，即

<ul class="menu">
    <li>
        <a href="">Uutiset</a>
    </li>
    <li> <----
        <ul class="inside">
            <li><a href="">Fringilla Condimentum</a></li>
            <li><a href="">Lorem</a></li>
        </ul>
    </li> <----
 </ul>

【讨论】：

在允许的内容 (developer.mozilla.org/en/docs/Web/HTML/Element/ul) 中显示：“零个或多个
元素，最终与

@yeti：现在 MDN says：“允许的内容：零个或多个

元素，而这些元素通常包含嵌套的

或

元素。”，所以这个答案由-alpha 是正确的，在我看来 ;)

【解决方案2】：

ul 元素的子代（直接后代）必须都是 li 元素。这是一个纯粹的语法要求。

但是，修复错误的方法取决于语义。如果内部列表对应于前面li 的主题的子主题，那么您应该将内部列表包装在该li 中，例如

            <li>
                <a href="">Asiakaspalvelu</a>
                <ul class="inside">
                    <li><a href="">Tilaa lehti</a></li>
                    <li><a href="">Muutos tilaukseen</a></li>
                    <li><a href="">Lähetä uutisvinkki</a></li>
                    <li><a href="">Anna palautetta</a></li>
                </ul>
            </li>

从技术上讲，这意味着只需向前移动一个</li> 标记。不过，您可能希望更改嵌套以反映结构，但这只是为了 HTML 源代码的可读性。

另一方面，如果内部列表在某种意义上只是较低级别的项目，而不是从属于较高级别的项目，您可以将它们包装在 <li> 中，其中不包含更多内容，例如

        <ul class="menu">
            <li>
                <a href="">Uutiset</a>
            </li>
            <li>
                <ul class="inside">
                    <li><a href="">Fringilla Condimentum</a></li>
                    <li><a href="">Lorem</a></li>
                    ...
                </ul>
            </li>
        ...

从技术上讲，这意味着只需将 <li> 和 </li> 包裹在 <ul> 元素周围。

但是，这通常表明存在设计缺陷。如果你只是想让一些项目更加嵌套，你应该使用样式而不是标记来做到这一点。并且包含与外部列表项无关的内部列表的列表相当令人困惑。

【讨论】：

这应该是 OP 的正确答案。先前的答案只是解释了这种情况，而没有提供现实世界的解决方案。该 anwser 将导致第二级中出现额外节点，这是不可接受的。

【解决方案3】：

这花了我一点时间来理解，因为我将我的内部 ul 包裹在它自己的 li 标记中，而不是我的内部 ul 附加到的 li 标记中。如果你将你的内部 ul 包裹在它自己的 li 标签中，你会得到一个额外的不需要的子弹。

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>item 3</li>
 <li>Item 4</li>
 <li>Item 5 has sub items:
      <ul>
          <li>Sub Item 1</li>
          <li>Sub Item 2</li>
      </ul>
 </li>
 <li>Item 6</li>
 <li>Item 7</li>
</ul>

【讨论】：

【解决方案4】：

您需要将内部 ul 放入 li 元素中。

【讨论】：

【解决方案5】：

IN li 可以容纳 ul。 Nexted li 和 uls 是可能的

<ul class="classname">
    <li>
        <a href="">TEST</a>
    </li>
    <li> 
        <ul class="classname">
            <li><a href="">1.1</a></li>
            <li><a href="">1.2</a></li>
        </ul>
    </li> 
 </ul>

【讨论】：

【解决方案6】：

<ul style="list-style-type:circle">
    <li>Cucumber Test Scripts (GroupId: Info.cukes) 
    </li>
    <ul style="list-style-type:square">
        <li>cucumber-junit</li>
        <li>cucumber-java</li>
        <ul style="list-style-type:disc">
            <li>Supports use of Annotations for cucumber step definitions.
            </li>
        </ul>
        <li>cucumber-java8</li>
        <ul style="list-style-type:disc">
            <li>Supports use of Lambda Expressions for cucumber step definitions.
            </li>
        </ul>
        <li>cucumber-picocotainer</li>
    </ul>
</ul>

这是在列表中嵌套列表的想法。快乐编码:)

【讨论】：