Comment créer une liste non ordonnée sans puces ?

Lucas D. -

Problème : Créer des listes sans puces

Par défaut, les listes non ordonnées en HTML affichent des puces. Parfois, pour des raisons de design ou de mise en page, vous pourriez vouloir une liste sans puces. Supprimer ces puces tout en conservant la structure de la liste peut être difficile si vous ne connaissez pas les méthodes de stylisation CSS.

Suppression des puces des listes non ordonnées

Utilisation du CSS pour supprimer les puces

Pour supprimer les puces des listes non ordonnées, utilisez le CSS. Définissez la propriété list-style-type à none pour l'élément <ul> :

ul {
  list-style-type: none;
}

Cette règle CSS supprime les puces de toutes les listes non ordonnées de votre page. Pour appliquer ce style à des listes spécifiques, utilisez des classes ou des ID :

.sans-puces {
  list-style-type: none;
}

Appliquez la classe à votre HTML :

<ul class="sans-puces">
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>

Exemple: Personnalisation de l'apparence des listes

Vous pouvez personnaliser davantage l'apparence de votre liste sans puces en ajoutant un remplissage ou des marges aux éléments de la liste :

.sans-puces li {
  padding-left: 20px;
  margin-bottom: 10px;
}

Attributs HTML pour supprimer les puces

Par le passé, HTML avait des attributs comme type="none" pour supprimer les puces :

<ul type="none">
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>

Ces méthodes sont maintenant obsolètes. Le CSS est l'approche préférée pour ces raisons :

  • Séparation des préoccupations : le CSS gère la présentation, tandis que le HTML se concentre sur la structure.
  • Flexibilité : le CSS permet plus d'options de style et une maintenance plus facile.
  • Compatibilité des navigateurs : les navigateurs modernes prennent en charge le style CSS pour les listes.

L'utilisation du CSS pour supprimer les puces des listes est plus fiable et suit les meilleures pratiques actuelles de développement web.

Options de style alternatives pour les listes sans puces

Marqueurs de liste personnalisés

Vous pouvez utiliser des images ou des symboles à la place des puces pour créer des styles de liste uniques. La propriété CSS list-style-image vous permet de remplacer les puces par défaut par des images personnalisées :

ul {
  list-style-image: url('custom-bullet.png');
}

Pour les symboles, vous pouvez utiliser le pseudo-élément ::before :

ul {
  list-style-type: none;
}

ul li::before {
  content: "→ ";
  color: #007bff;
}

Ce code ajoute un symbole de flèche avant chaque élément de la liste, créant un effet de puce personnalisé.

Exemple: Utilisation des caractères Unicode

Pour une large gamme d'options de symboles, vous pouvez utiliser des caractères Unicode dans la propriété content. Par exemple, pour utiliser un symbole d'étoile :

ul li::before {
  content: "\2605 ";
  color: #ffd700;
}

Cela ajoute une étoile dorée avant chaque élément de la liste.

Techniques d'espacement et d'indentation

Ajuster les marges et le rembourrage peut créer une séparation visuelle sans puces. Pour ajouter de l'espace entre les éléments de la liste :

ul {
  list-style-type: none;
  padding-left: 0;
}

li {
  margin-bottom: 10px;
}

Pour l'indentation sans puces :

ul {
  list-style-type: none;
  padding-left: 20px;
}

Ce CSS supprime les puces, ajoute un rembourrage à gauche de la liste et crée de l'espace entre les éléments. Ces techniques aident à maintenir une structure de liste claire sans utiliser de points traditionnels.