Html ul 中 ul 的正确语义

correct semantics for ul in ul

提问by Om3ga

I am writing ulinside ulto make a accordion type of menu. But when I check my code below in html validator it gives me these errors

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

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

How can I write semantically correct html for ul in this case?

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

Here is my 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>

回答by The Alpha

You must wrap every inner ULs with an LI, i.e.

你必须UL用一个包裹每个内部s 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>      

回答by Jukka K. Korpela

The children (direct descendants) of a ulelement must all be lielements. This is a purely syntactic requirement.

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

The way to fix the error depends on semantics, however. If the inner lists correspond to subtopics of the topic of the preceding li, then you should wrap the inner list inside that li, e.g.

然而，修复错误的方法取决于语义。如果内部列表对应于前一个主题的子主题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>

Technically, this means just moving one </li>tag forward. You may wish to change the nesting, though, to reflect the structure, but this is for HTML source readability only.

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

If, on the other hand, inner list is just items at a lower level in some sense, without being subordinate to a higher level item, you could wrap them inside a <li>that contains nothing more, e.g.

另一方面，如果内部列表在某种意义上只是较低级别的项目，而不从属于较高级别的项目，则可以将它们包装在<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>
        ...

Technically this means just wrapping <li>and </li>around the <ul>element.

从技术上讲这只是手段包装<li>和</li>周围的<ul>元素。

However, this would normally indicate a design flaw. If you just want some items to be more nested, you should do that with styling rather than markup. And a list containing inner lists without relation to the items of the outer list is rather confusing.

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

回答by tankney

This took me a little while to understand because I wrapped my inner ul in its own li tag and not within the li tag that my inner ul was attached to. If you wrap your inner ul in its own li tag you'll get an additional unneeded bullet.

这花了我一点时间来理解，因为我将我的内部 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>

回答by sourcejedi

You need to put the inner ulinside an lielement.

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

回答by Bimal

IN li can hold ul. Nexted li and uls are possible

IN li 可以容纳ul。下一个 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>

回答by atreyHazelHispanic

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

This is the idea on nesting lists in lists. Happy coding :)

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