web-dev-qa-db-fra.com

Puis-je utiliser un div à l'intérieur d'un élément de liste?

Pourquoi le code suivant est-il valide lorsque j'utilise un <div> à l'intérieur d'un <li>?

<ul>
    <li class="aschild">
        <div class="nav">Test</div>
    </li>
</ul>
htmlhtml5validationxhtmlhtml-lists
58
Vimal Basdeo

Oui, vous pouvez utiliser un div à l'intérieur d'un li et il sera validé.

<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block     "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
61
Jawad

À l'intérieur d'un <li> vous pouvez avoir tout ce que vous pourriez naturellement mettre dans un <div>. Ils ne sont pas différents en ce sens.

Il devrait également être valide en HTML4, XHTML et HTML5.

Ceci est PAS valide (donc les sources que vous avez trouvées sur "pas de divs dans les listes" pourraient faire référence à cette situation):

<ul>
    <li></li>
    <div></div>
    <li></li>
</ul>

So: Les listes (ul, ol) ne peuvent avoir que li comme enfants. Mais li peuvent avoir n'importe quoi comme leurs enfants.

40
kapa

Car <li> est un élément de bloc, pas un élément en ligne comme <span> ou <a>.

13
twsaef

Un <li> est un élément de bloc et fonctionnera parfaitement avec d'autres éléments de bloc à l'intérieur.

7
Adam

Oui, vous pouvez. Autant que tu veux.

4
Jose Faeti