如何在HTML中显示反向排序列表？

Question

我需要帮助.有没有办法在css/scss中显示反向排序列表？与此类似的东西:

  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

您可以旋转父元素180deg,然后旋转子元素-180deg.

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

这里的例子

或者,您可以使用弹性框以及order属性.

虽然这在技术上不会颠倒顺序,但您也可以使用counter-increment伪元素.

这里的例子

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

Answer 2

您可以使用flexbox来实现此目的.它允许您使用flex-direction属性反转顺序.

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

li {
    flex: 0 0 auto;
}

• 规范
• 现场演示
• 有限的浏览器支持

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参考
• w3schools的例子