Comment afficher des listes dans l'ordre inverse en utilisant HTML et CSS ?

Affichage de listes triées dans l'ordre inverse avec HTML et style

En CSS/SCSS, il est possible d'inverser l'ordre des éléments dans une liste HTML à travers diverses méthodes :

Méthode 1 : Rotation et Inverse Rotation

Cette technique consiste à faire pivoter l'élément parent de 180 degrés, puis à contre-roter les éléments enfants de -180 degrés, inversant ainsi leur ordre à l'écran.

ul {
    transform: rotate(180deg);
}

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

Méthode 2 : Flexbox avec la propriété Order

Flexbox offre la possibilité de contrôler l'ordre des éléments à l'aide de la propriété order. En définissant des valeurs d'ordre négatif pour les éléments enfants, ils peuvent être positionnés dans l'ordre inverse dans la liste.

Méthode 3 : Contre-incrément avec un pseudo-élément

Pendant que pas une véritable inversion d'ordre, cette méthode utilise un contre-incrément et un pseudo-élément pour afficher les numéros d'articles à l'envers order.

ul {
    list-style-type: none;
    counter-reset: item 6;
}

ul > li {
    counter-increment: item -1;
}

ul > li:after {
    content: counter(item);
}

Exemple :

Voici un exemple de liste triée à l'envers utilisant la méthode 1 :

<ul>
  <li>1. I am a list item.</li>
  <li>2. I am a list item.</li>
  <li>3. I am a list item.</li>
  <li>4. I am a list item.</li>
  <li>5. I am a list item.</li>
</ul>

Résultat réel :

5. I am a list item.
4. I am a list item.
3. I am a list item.
2. I am a list item.
1. I am a list item.

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!