Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je créer une liste ordonnée HTML avec des marqueurs alpha inférieurs et des parenthèses droites ?

DDD
Libérer: 2024-11-24 09:57:13
original
925 Les gens l'ont consulté

How Can I Create an HTML Ordered List with Lower-Alpha Markers and Right Parentheses?

Listes ordonnées en HTML : alpha inférieur avec parenthèses droites

Le type de liste ordonnée standard pour "alpha inférieur" utilise un point " ". comme marqueur de liste. Existe-t-il un moyen de modifier cela pour utiliser une parenthèse droite à la place, ce qui donne une séquence comme a)... b) etc. ?

Solution

Propositions CSS une fonctionnalité appelée compteurs, qui permet la création automatique de séquences telles que des numéros de chapitre. En adaptant ce concept, nous pouvons obtenir la liste alpha inférieure souhaitée avec des parenthèses droites.

Voici un extrait de code :

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

La propriété "counter-reset" initialise un compteur nommé " list" pour la liste ordonnée. "style de liste : aucun ;" supprime les symboles de la liste native.

L'étape clé est le sélecteur "li:before". Il insère du contenu avant chaque élément de la liste :

  • "counter(list, lower-alpha)" compte en utilisant les caractères alpha inférieurs (a), b), etc.).
  • L'ajout d'une parenthèse fermante et d'un espace crée le format souhaité : a)

La liste résultante apparaîtra comme suit :

`Type de style de liste personnalisé (v1) :


  1. Numéro 1

  2. < ;li>Numéro 2
  3. Numéro 3

  4. Numéro 4

  5. Numéro 5

  6. Numéro 6

`

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal