如何在HTML中显示反向排序的列表？ [英] How to display a reverse-ordered list in HTML?

问题描述

我需要你快速帮助。有没有任何方式在css / scss显示逆序列表。像这样：

  5.我是一个列表项。 
 4.我是一个列表项。 
 3.我是一个列表项。 
 2.我是一个列表项。 
 1.我是一个列表项。 
  

解决方案

您可以旋转父元素 180deg ，然后旋转子元素 -180deg 。

 code> ul {
 transform：rotate（180deg）; 
} 
 ul> li {
 transform：rotate（-180deg）; 
} 
  

Example

或者，您也可以与 订单属性。

---

虽然这不是技术上颠倒顺序，您也可以使用 counter-increment 。 >

这里的例子

  ul {
 list-style-type：none; 
 counter-reset：item 6; 
} 
 ul> li {
 counter-increment：item -1; 
} 
 ul> li：after {
 content：counter（item）; 
} 
  

I need you quick help. Is there any way in css/scss to show reverse ordered list. Something like this:

  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.

解决方案

You could rotate the parent element 180deg and then rotate the children elements -180deg.

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

Example Here

Alternatively, you could use flex boxes along with the order property.

---

Although this isn't technically reversing the order, you could also use counter-increment along with a psuedo element.

Example Here

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

这篇关于如何在HTML中显示反向排序的列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！