47

我在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>
4

6 回答 6

111

你必须用一个包裹每个内部ULs 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> <----
 </ul>
于 2012-08-26T09:39:08.627 回答
16

元素的子元素（直接后代）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>不包含更多内容的 a 中，例如

        <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>元素。

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

于 2012-08-26T10:16:23.867 回答
6

这花了我一点时间来理解，因为我将我的内部 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>
于 2014-02-21T19:50:28.853 回答
3

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

于 2012-08-26T09:38:05.753 回答
2

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>
于 2019-10-25T09:03:36.753 回答
-1 
<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>

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

于 2018-06-21T19:15:39.477 回答