Question

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

Answer 1

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

Answer 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>内，例如< / p>

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

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

Answer 3

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

Answer 4

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

Answer 5

IN li可以容纳ul。接下来的li和uls可能

import {jsPDF} from 'jspdf';


public downloadPDF() {
   const doc = new jsPDF();
   .....
}

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

这是在列表中嵌套列表的想法。编码愉快：）

ul中ul的正确语义

6 个答案: