web-dev-qa-db-fra.com

Est-il possible de grouper les éléments `<li>`?

Je dois diviser en groupes plusieurs éléments <li> dans une liste, est-ce possible? (Je sais que je donne à chaque élément des noms de classe différents/séparés en différents <ul>)

htmlxhtml
26
Itay Moav -Malimovka

Avez-vous envisagé des UL imbriqués? Je crois que cela validerait:

<UL>
    <LI>
        <UL>
            <LI></LI>
            <LI></LI>
            <LI></LI>
        </UL>
    </LI>
    <LI>
        <UL>
            <LI></LI>
            <LI></LI>
            <LI></LI>
            <LI></LI>
            <LI></LI>
        </UL>
    </LI>
</UL>

Votre astuce CSS était ma première hypothèse. dommage que vous ne puissiez pas l'utiliser.

20
LesterDove

Selon le schéma XHTML (ou un schéma de toute façon), la seule chose que vous mettez dans un <ul> est un <li>, comme décrit à http://www.w3.org/TR/2006/WD-xhtml-modularization- 20060705/abstract_modules.html # s_listmodule

Vous pouvez modifier l'apparence des éléments de la liste à l'aide de CSS, en attribuant différentes valeurs de classe aux éléments <li>.

<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...
5
ChrisW

Avez-vous envisagé d'utiliser l'héritage multiple de classes CSS? Cela peut être un peu compliqué à maintenir, mais cela résoudra le cas de la même entrée dans plusieurs groupes. Le HTML ressemble à quelque chose comme ça:

<ul class="pizza-toppings">
    <li class="meat">pepperoni</li>
    <li class="meat">bacon</li>
    <li class="vegetarian">cheese</li>
    <li class="vegetarian vegan">mushrooms</li>
    <li class="vegetarian vegan">onions</li>
</ul>

Nous avons ici trois groupes (viande, végétarien et végétalien) et quelques garnitures, comme les champignons et les oignons, font partie de plus d'un groupe.

5
Dan M

Si vous devez séparer en différents groupes des éléments d'une liste non ordonnée, ils ne doivent pas appartenir à des listes différentes. N'est-ce pas OR doit être groupé dans une liste ordonnée (plusieurs UL dans une OL).

S'il s'agit de besoins de présentation (pour afficher une liste sur plusieurs colonnes) et que vous puissiez résoudre quelques contraintes, utilisez la seconde technique dans https://web.archive.org/web/1/http://articles.techrepublic. % 2ecom% 2ecom/5100-10878_11-5810687.html ou expliqué également ici: http://www.communitymx.com/content/article.cfm?page=2&cid=27F87

De tels groupes existent pour select (optgroup) mais vous ne pouvez évidemment pas séparer les éléments d'option, car vous ne devez en sélectionner qu'un, ils doivent donc appartenir au même élément.

0
FelipeAls

Je pense que vos seules options sont celles que vous avez déjà identifiées, plusieurs listes ou via des classes, car pour qu'un li soit dans la liste définie par un ul ou un ol, il doit s'agir de immédiat enfant de cette ul/ol ( référence ).

0
T.J. Crowder