如何在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);
}

Example Here

或者，你可以使用弹性盒和order property.

---

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

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

您可以使用flexbox来实现此目的。它允许您使用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

Answer 4

检查这个链接...你可以使用flex-direction：row-reverse;

enter link description here

Answer 5

如果您想按降序而不是按升序排序列表： 快速回答：reversed="reversed"。

请阅读以下说明：

在以前版本的HTML中，实现此目的的唯一方法是在每个lielement上放置一个value属性，并连续减少值。

<h3>Top 5 TV Series</h3>
<ol>
  <li value="5">Friends
  <li value="4">24
  <li value="3">The Simpsons
  <li value="2">Stargate Atlantis
  <li value="1">Stargate SG-1
</ol>

这种方法的问题是手动指定每个值可能是编写和维护的时间，并且HTML 4.01或XHTML 1.0 Strict DOCTYPE中不允许使用value属性（尽管HTML 5修复了该问题并允许value属性）新标记非常简单：只需向ol元素添加reverse属性，并可选择提供起始值。如果没有提供起始值，浏览器将计算列表项的数量，并从该数字倒计数到1。

<h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
  <li>Police Academy (Series)
  <li>Harry Potter (Series)
  <li>Back to the Future (Trilogy)
  <li>Star Wars (Saga)
  <li>The Lord of the Rings (Trilogy)
</ol>

由于该列表中有5个列表项，因此列表将从5减1到1。反转属性是布尔属性。在HTML中，可以省略该值，但在XHTML中，需要将其写为：reversed =“reversed”。

资料来源：https://dzone.com/articles/html-5-reverse-ordered-lists