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

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

技術的には、これは 1 つの</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>ます。

ただし、これは通常、設計上の欠陥を示しています。一部のアイテムをさらにネストしたい場合は、マークアップではなくスタイリングを使用してください。また、外側のリストの項目と関係のない内側のリストを含むリストは、やや混乱します。

于 2012-08-26T10:16:23.867 に答える
3

ul要素の内側にインナーを配置する必要がありliます。

于 2012-08-26T09:38:05.753 に答える
2

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>
于 2019-10-25T09:03:36.753 に答える