web-dev-qa-db-fra.com

comment masquer les <li> puces dans le menu de navigation et les liens de bas de page MAIS les afficher pour répertorier les éléments

J'ai un menu de navigation, un pied de page et un diaporama qui utilise le style indiqué pour répertorier les liens et les images. J'ai le css list-style:none; est configuré pour masquer les puces en regard des liens et des images dans la navigation et le pied de page, mais je souhaite afficher les puces pour la liste de texte normal.

Comment puis-je faire ceci?

htmlhtml-lists
33
user1373581

L'exemple ci-dessous explique comment supprimer des puces à l'aide d'une classe de style css. Vous pouvez utiliser, comme une classe css, un identifiant (#id), une balise parent, etc. De la même manière que vous pouvez définir un CSS pour supprimer les puces du pied de page.

J'ai utilisé ce site comme point de départ.

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>
28
Flavio Cysne

Vous devez définir une classe pour les puces que vous souhaitez masquer. Pour des exemples

.no-bullets {
    list-style-type: none;
}

Puis appliquez-le à la liste que vous voulez des puces cachées:

<ul class="no-bullets">

Toutes les autres listes (sans classe spécifique) afficheront les puces comme d'habitude.

21
Israel Unterman

Vous pouvez styler les éléments li différemment en fonction de leurs éléments class, id ou ancêtres:

li { /* styles all li elements*/
    list-style-type: none;
}

#ParentListID li { /* styles the li elements that have an ancestor element
                      of id="ParentListID" */
    list-style-type: bullet;
}

li.className { /* styles li elements of class="className" */
    list-style-type: bullet;
}

Ou, pour utiliser les éléments ancêtres:

#navigationContainerID li { /* specifically styles the li elements with an ancestor of
                               id="navigationContainerID" */
    list-style-type: none;
}

li { /* then styles all other li elements that don't have that ancestor element */
    list-style-type: bullet;
}
5
David Thomas

J'ai combiné une partie de réponse de Flavio à cette petite solution .

.hidden-ul-bullets li {
    list-style: none;
}
.hidden-ul-bullets ul {
    margin-left: 0.25em; // for my purpose, a little indentation is wished
}

La décision concernant les puces est prise au niveau d’un élément englobant, généralement un div. L'inconvénient (ou tâche) de ma solution est que la suppression du style de liste s'applique également aux listes ordonnées.

1
Wolf

Disons que vous utilisez cette disposition HTML5:

<html>
    <body>
        <header>
            <nav><ul>...</ul></nav>
        </header>
        <article>
            <ul>...</ul>
        </article>
        <footer>
            <ul>...</ul>
        </footer>
    </body>
</html>

Vous pourriez dire dans votre CSS:

header ul, footer ul, nav ul { list-style-type: none; }

Si vous utilisez HTML 4, attribuez des identifiants à vos DIV (au lieu d'utiliser les nouveaux éléments fantaisie) et modifiez-les comme suit:

#header ul, #footer ul, #nav ul { list-style-type: none; }

Si vous utilisez une feuille de style de réinitialisation CSS (comme celle d'Eric Meyer), vous devrez en fait restituer le style de liste, car la réinitialisation supprime le style de liste de toutes les listes.

#content ul { list-style-type: disc; margin-left: 1.5em; }
1
Derreck Dean

Vous pouvez également définir une classe pour les puces que vous voulez afficher, donc dans le CSS:

ul {list-style:none; list-style-type:none; list-style-image:none;}

Et dans le code HTML, vous définissez uniquement les listes à afficher:

<ul style="list-style:disc;">

Ou vous pouvez également définir une classe CSS:

.show-list {list-style:disc;}

Puis appliquez-le à la liste que vous souhaitez afficher:

<ul class="show-list">

Toutes les autres listes ne montreront pas les balles ...

0
Marcus