Làm cách nào để hiển thị danh sách được sắp xếp ngược lại trong HTML?

Question

Tôi cần bạn trợ giúp nhanh. Có cách nào trong css/scss để hiển thị danh sách theo thứ tự ngược lại. Một cái gì đó như thế này:

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

Bạn có thể xoay phần tử cha 180deg và sau đó xoay các phần tử con -180deg.

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

Example Here

Ngoài ra, bạn có thể sử dụng hộp flex cùng với order property.

---

Mặc dù đây không phải là về mặt kỹ thuật đảo ngược thứ tự, bạn cũng có thể sử dụng counter-increment cùng với một yếu tố psuedo .

Example Here

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

Answer 2

Bạn có thể sử dụng flexbox để đạt được điều này. Nó cho phép bạn đảo ngược thứ tự với thuộc tính flex-direction.

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

li { 
    flex: 0 0 auto; 
} 

• spec
• live demo
• limited browser support

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> 

• w3schools reference
• w3schools example