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

Création de listes ordonnées sans points

De nombreux développeurs recherchent des méthodes pour créer des listes ordonnées sans le point ou le caractère numérique traditionnel après chaque élément. Alors que l'on croyait auparavant impossible, HTML et CSS offrent désormais une solution grâce à la mise en œuvre appropriée du type de style de liste et des pseudo-sélecteurs.

Solution CSS

Pour éliminez les points, utilisez le code CSS suivant :

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

En définissant 'list-style-type' sur 'none', vous supprimez la puce ou le caractère numérique par défaut. 'counter-increment' crée un compteur pour chaque élément de la liste, affiché dans le pseudo-sélecteur ':before'. La propriété 'content' définit la valeur du compteur comme contenu de l'élément de liste. Vous pouvez ajuster la propriété « width » pour contrôler la largeur du nombre.

Remplacement pour les navigateurs plus anciens

Pour les navigateurs Internet Explorer 6 et 7, ajoutez le CSS suivant pour restaurer le style de liste par défaut :

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

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!