Maison > interface Web > tutoriel CSS > Comment numéroter des listes ordonnées imbriquées en HTML ?

Comment numéroter des listes ordonnées imbriquées en HTML ?

Susan Sarandon
Libérer: 2024-11-15 08:36:02
original
1037 Les gens l'ont consulté

How to Number Nested Ordered Lists in HTML?

Numérotation des listes ordonnées imbriquées en HTML

Pour numéroter les listes ordonnées imbriquées en HTML, une combinaison de CSS et de JavaScript peut être utilisée. Cette approche fonctionne de manière cohérente dans les navigateurs modernes, y compris ceux qui ne prennent pas en charge les propriétés CSS avancées.

Approche CSS :

  1. Définissez le type de style de liste de la liste ordonnée principale à aucun en utilisant CSS :
ol {
  list-style-type: none;
}
Copier après la connexion
  1. Utilisez les propriétés CSS counter-reset et counter-increment pour générer les nombres. Par exemple, le premier niveau d'imbrication doit incrémenter un compteur nommé "level1":
ol:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}
Copier après la connexion
  1. Pour les listes ordonnées imbriquées, réinitialisez le compteur pour démarrer une nouvelle séquence :
ol li ol {
  list-style-type: none;
  counter-reset: level2;
}
Copier après la connexion
  1. Générez les numéros de la liste imbriquée à l'aide du compteur précédemment incrémenté :
ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}
Copier après la connexion

Approche jQuery (prise en charge IE6/7) :

  1. Enveloppez les éléments de liste imbriqués avec un pour appliquer le style :
$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});
Copier après la connexion
  1. Stylez le éléments pour fournir le format de numérotation souhaité :
ol li span {
  margin: 0 5px 0 -25px;
}
Copier après la connexion

En combinant ces techniques CSS et JavaScript, vous pouvez numéroter efficacement des listes ordonnées imbriquées en HTML, garantissant ainsi un formatage cohérent dans les principaux navigateurs.

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