web-dev-qa-db-fra.com

Pouvons-nous utiliser un autre TAG dans <ul> avec <li>?

Pouvons-nous utiliser un autre TAG dans <ul> avec <li>?

comme

<ul>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
</ul>
cssxhtmlaccessibilityw3c
36
Jitendra Vyas

Pour que votre code soit valide, vous ne pouvez insérer aucune balise dans un <ul> autre qu'un <li>.

Vous pouvez cependant placer n'importe quel élément de niveau de bloc dans le <li>, comme ceci:

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>
44
Jonny Haynes

Selon la Recommandation W3C , la structure de base d’une liste doit être:

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

Vous pouvez mettre les balises p uniquement à l'intérieur des balises li, et non comme enfants directs de ul. La recommandation du W3C stipule expressément:

les listes sont constituées de séquences d'éléments de liste définies par l'élément LI

11
ЯegDwight

Bien que vous puissiez avoir d'autres balises à l'intérieur (et cela pourrait fonctionner parfaitement), vous ne devriez pas, car ce n'est pas compatible w3c. Cela a aussi très peu de sens sémantique.

Il suffit de créer une page simple et de l’exécuter à travers le validateur ( http://validator.w3.org/ ) et vous verrez par vous-même :)

5
marcgg

Vous pouvez utiliser une balise de template et c'est totalement légal. Par exemple:

<ul>
**<template>**Some text here or <p>Some text here<p> etc**</template>**
<li>item 1</li>
**<template>**Some text here or <p>Some text here<p> etc**</template>**
<li>item 1</li>
</ul>
2
Umair Hamid

Non, ce serait un balisage invalide. Cependant, si vous essayez de donner une apparence différente à certaines des lignes, vous pouvez le faire en ajoutant un nom de classe spécifique à une balise li à la place. Voir ci-dessous:

<ul>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
</ul>
2
drdiv

Knockout.js réponse spécifique, vous pouvez utiliser la syntaxe de commentaire suivante.

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

<script type="text/javascript">
    ko.applyBindings({
        myItems: [ 'A', 'B', 'C' ]
    });
</script>
0
jps

Vous pouvez écrire une telle marque mais vous ne devriez pas car elle est non conforme et vous pouvez obtenir des résultats étranges et inattendus dans différents navigateurs.

0
gingerbreadboy

si vous faites cela pour styler une partie de l'élément de liste, vous pouvez le faire

<ul>
  <li>normal text <span>bold text</span></li>
  <li>normal text <span>bold text</span></li>
</ul>

et ensuite utiliser le CSS

ul li {font-size: 12px; font-weight: normal;}
ul li span {font-size: 12px; font-weight: bold;}

j'espère que cela t'aides

0
pixeltocode

Non, si c'est une liste, il y a des éléments de liste. Je ne vois aucune utilité pour une liste contenant des éléments non listés; ce n'est pas une liste ...

0
Y. Shoham