2889 votes

J'ai besoin d'une liste non ordonnée sans puces

J'ai créé une liste non ordonnée. Je trouve que les puces dans la liste non ordonnée sont gênantes, donc je veux les supprimer.

Est-il possible d'avoir une liste sans puces ?

4144voto

Paul Dixon Points 122033

Vous pouvez supprimer les puces en définissant le list-style-type sur none dans le CSS de l'élément parent (typiquement un

), par exemple :

ul {
  list-style-type: none;
}

Vous voudrez peut-être également ajouter padding: 0 et margin: 0 si vous souhaitez également supprimer l'indentation.

Voir Listutorial pour une excellente présentation des techniques de mise en forme des listes.

0 votes

@tovmeod Semble bien fonctionner dans mon IE9 (sous Win7). (c'est une page complexe, pas un simple POC, peut-être qu'autre chose a changé le comportement)

3 votes

Si vous êtes comme moi et cherchez également comment supprimer l'indentation, consultez ceci - stackoverflow.com/a/13939142/846727

14 votes

Oh, combien de fois je suis revenu ici pour le copier / coller :)

717voto

Scott Stafford Points 13161

Si vous utilisez Bootstrap, il a une classe "unstyled":

Supprimez le style de liste par défaut et le padding à gauche sur les éléments de liste (enfants immédiats uniquement).

Bootstrap 2:

   ...

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3, 4 et 5:

   ...

Bootstrap 3: http://getbootstrap.com/css/#type-lists

Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Bootstrap 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled

5 votes

Si nous avions répertorié toutes les classes pour chaque framework CSS, nous aurions un désordre sur StackOverflow. Une recherche rapide sur Google révèle que Bootstrap n'était utilisé que par 2% des sites web à son apogée, et c'est certainement en baisse avec l'introduction de solutions plus sensées comme flexbox et css grid.

14 votes

En fait, cette réponse est exactement ce que je cherchais. Et Bootstrap est utilisé par 3,6% de l'ensemble d'Internet, il ne perd donc pas en popularité. trends.builtwith.com/docinfo/Twitter-Bootstrap Une recherche rapide sur Google révèle que Bootstrap est constamment classé dans la catégorie des "cadres CSS les plus populaires".

3 votes

@PJBrunet Si nous avions répertorié les classes pour chaque framework CSS, beaucoup plus de personnes obtiendraient des réponses à leurs questions. De plus, l'auteur de la question n'a pas mentionné qu'il était intéressé uniquement par une solution CSS pure.

227voto

karim79 Points 178055

Vous devez utiliser list-style: none;

    ...

7 votes

Soyez conscient que le css en ligne prévaut sur le css dans les fichiers. En fonction de l'application/des pratiques de développement, cela peut être vraiment ennuyeux.

54voto

Haim Evgi Points 40786

En CSS, style,

list-style-type: none;

47voto

Daniel Points 3803

Vous devriez ajouter un style à l'élément

comme suit :

    Item
    ...
    Item

Cela supprimera les puces. Vous pourriez également ajouter le CSS dans une feuille de style comme les exemples ci-dessus.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X