Comment numéroter des listes ordonnées imbriquées en 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;
}

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

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

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

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

2. Stylez le éléments pour fournir le format de numérotation souhaité :

ol li span {
  margin: 0 5px 0 -25px;
}

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!