Comment inverser une liste ordonnée en HTML ?

Listes ordonnées inversées en HTML

L'affichage d'une liste dans l'ordre inverse peut être réalisé en utilisant CSS/SCSS. Une méthode consiste à configurer l’élément parent pour qu’il pivote de 180 degrés et les éléments enfants pour qu’ils pivotent de -180 degrés. Cette méthode crée une liste visuellement inversée :

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Une autre approche utilise des boîtes flexibles et la propriété "order". Cette option permet d'obtenir un résultat similaire mais sans faire pivoter les éléments :

ul {
    display: flex;
    flex-direction: column-reverse;
}
ul > li {
    order: 1;
}

Alternativement, vous pouvez utiliser "contre-incrément" avec un pseudo-élément, offrant une autre façon d'afficher une liste dans l'ordre inverse :

ul {
    list-style-type: none;
    counter-reset: item 6;
}
ul > li {
    counter-increment: item -1;
}
ul > li:after {
    content: counter(item);
}

Sélectionnez les exemples de liens fournis dans les réponses pour des démonstrations pratiques.

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!