Comment puis-je personnaliser la numérotation des listes ordonnées ?

Personnalisation de la numérotation des listes ordonnées

Question : Comment personnaliser une liste ordonnée pour modifier l'alignement des nombres, modifiez le caractère après le numéro et passez du numérique à l'alphabétique/romain notation ?

Aligner les nombres à gauche :

Pour aligner les nombres à gauche dans une liste ordonnée, utilisez CSS comme suit :

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

Caractère de numérotation personnalisé :

Pour changer le caractère après le numéro, modifiez la propriété content dans le CSS au-dessus de. Par exemple, remplacez-le par ".) " pour les points :

content: counter(item) ".) ";

Passer à la notation alphabétique/romaine :

Pour passer des chiffres aux listes alphabétiques/romaines , utilisez l'attribut type sur l'élément ol :

• type="a" pour l'alphabet minuscule notation
• type="A" pour la notation alphabétique majuscule
• type="i" pour la notation romaine minuscule
• type="I" pour la notation romaine majuscule

Compatibilité :

La solution CSS fournie est compatible avec Firefox 3, Google Chrome et Opéra. Cependant, cela peut ne pas fonctionner complètement dans IE7.

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!