Comment créer des listes ordonnées sans point en HTML et CSS ?

Création de listes ordonnées sans point en HTML et CSS

Malgré l'hypothèse courante selon laquelle les listes ordonnées en HTML doivent avoir un point après le nombre, il est possible de créer un sans.

Solution CSS

Au lieu de recourir à l'approche non sémantique de type liste-image, vous pouvez éliminer le point avec CSS :

<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>

Remarque

Cette solution utilise le pseudo-sélecteur :before, qui peut ne pas être pris en charge dans les navigateurs plus anciens comme IE6 et IE7. Pour ces navigateurs, vous pouvez ajouter une règle supplémentaire qui les cible uniquement pour afficher le style de liste normal :

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

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!