Maison > interface Web > tutoriel CSS > Comment puis-je créer des listes ordonnées avec une numération alphabétique minuscule et des parenthèses droites à l'aide de CSS ?

Comment puis-je créer des listes ordonnées avec une numération alphabétique minuscule et des parenthèses droites à l'aide de CSS ?

Barbara Streisand
Libérer: 2024-11-28 02:16:13
original
937 Les gens l'ont consulté

How Can I Create Ordered Lists with Lowercase Alphabetical Numeration and Right Parentheses Using CSS?

Création de listes ordonnées avec des parenthèses alpha inférieures et droites

Le style de liste ordonnée par défaut pour la numération alpha inférieure utilise des points. Cependant, est-il possible de modifier ce style et d'utiliser des parenthèses droites à la place ?

Personnalisation des styles de liste ordonnée

À l'aide de compteurs CSS, nous pouvons établir des styles de liste personnalisés. Voici comment obtenir le résultat souhaité :

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}
Copier après la connexion

Pour démontrer cette solution :

<span>Custom List Style Type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>
Copier après la connexion

Ce style personnalisé affichera désormais les éléments de liste ordonnés avec une numérotation alpha inférieure suivie d'un droit parenthèse :

a) Numéro 1
b) Numéro 2
c) Numéro 3
d) Numéro 4
e) Numéro 5
f) Numéro 6

Notez que vous devrez peut-être ajuster le rembourrage ou d'autres aspects de style pour répondre à vos besoins spécifiques.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal