Comment supprimer la période des listes ordonnées en HTML et CSS ?

Personnalisation des listes ordonnées en HTML et CSS

Les listes ordonnées sont un outil précieux pour présenter des informations de manière séquentielle. Cependant, le style par défaut inclut souvent un point après chaque numéro, ce qui n'est pas toujours souhaitable. Cet article explique comment personnaliser les listes ordonnées et supprimer le séparateur de points.

Création de listes ordonnées sans point

Traditionnellement, la suppression du point d'une liste ordonnée nécessitait la création d'un classe personnalisée pour chaque numéro et en utilisant la propriété list-style-image. Cependant, il existe une solution CSS uniquement, à la fois élégante et sémantique :

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

Cette solution utilise des compteurs CSS et le pseudo-élément :before pour générer une numérotation personnalisée. La propriété list-style-type est définie sur none pour supprimer les puces ou les nombres par défaut. La propriété counter-reset garantit que le compteur démarre à 1.

Compatibilité des navigateurs

Il est important de noter que cette solution s'appuie sur le pseudo-sélecteur :before, qui n'est pas pris en charge par IE6 et IE7. Pour ces navigateurs, une règle CSS supplémentaire peut être ajoutée :

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

Cette règle remplace le style personnalisé et garantit que IE6 et IE7 affichent la liste numérotée par défaut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!