Comment afficher une liste inversée en HTML?

Question

J'ai besoin d'aide. Est-il possible d'afficher la liste ordonnée inversée dans css/scss? Quelque chose de semblable à ceci:

  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.

Answer 1

Vous pouvez faire pivoter l'élément parent 180deg, puis faire pivoter les éléments enfants -180deg.

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

Exemple ici

Vous pouvez également utiliser des boîtes flexibles avec la propriété order.

---

Bien que cela n'inverse techniquement pas l'ordre, vous pouvez également utiliser counter-increment avec un élément psuedo.

Exemple ici

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

Answer 2

Vous pouvez utiliser flexbox pour y parvenir. Cela vous permet d'inverser l'ordre avec la propriété flex-direction.

ol { 
    display: flex;
    flex-direction: column-reverse;
}

li {
    flex: 0 0 auto;
}

• spec
• démo live
• support du navigateur limité

Answer 3

<ol reversed>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
</ol>

• Référence w3schools
• Exemple w3schools

Answer 4

vérifiez ce lien ... vous pouvez utiliser flex-direction: row-reverse;

entrez la description du lien ici