如何在 HTML 中显示反向排序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25695000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a reverse-ordered list in HTML?
提问by Monkviper
I need help. Is there any way to show reverse ordered list in css/scss? Something similar to this:
我需要帮助。有没有办法在 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.
回答by Josh Crozier
You could rotate the parent element 180degand then rotate the children elements -180deg.
您可以旋转父元素180deg，然后旋转子元素-180deg。
ul {
transform: rotate(180deg);
}
ul > li {
transform: rotate(-180deg);
}
Alternatively, you could use flex boxes along with the orderproperty.
Although this isn't technically reversing the order, you could also use counter-incrementalong with a psuedo element.
尽管这在技术上并不是颠倒顺序，但您也可以counter-increment与伪元素一起使用。
ul {
list-style-type:none;
counter-reset:item 6;
}
ul > li {
counter-increment:item -1;
}
ul > li:after {
content: counter(item);
}
回答by Quentin
回答by Mkapin
<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>
回答by RockstarSteph
If you want to order your list in descending order instead of ascending:
Quick answer: reversed="reversed".
如果您想按降序而不是升序对列表进行排序：
快速回答：reversed="reversed"。
Read below for explanation:
阅读以下解释：
In previous versions of HTML, the only way to achieve this was to place a value attribute on each lielement, with successively decreasing values.
在以前的 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>
The problem with that approach is that manually specifying each value can be time consuming to write and maintain, and the value attribute was not allowed in the HTML 4.01 or XHTML 1.0 Strict DOCTYPEs (although HTML 5 fixes that problem and allows the value attribute) The new markup is very simple: just add a reversed attribute to the ol element, and optionally provide a start value. If there's no start value provided, the browser will count the number of list items, and count down from that number to 1.
这种方法的问题在于，手动指定每个值的编写和维护可能很耗时，而且 HTML 4.01 或 XHTML 1.0 Strict DOCTYPE 中不允许使用 value 属性（尽管 HTML 5 修复了该问题并允许使用 value 属性）。新标记非常简单：只需向 ol 元素添加一个 reversed 属性，并可选择提供一个起始值。如果没有提供起始值，浏览器将计算列表项的数量，并从该数字倒数到 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>
Since there are 5 list items in that list, the list will count down from 5 to 1. The reversed attribute is a boolean attribute. In HTML, the value may be omitted, but in XHTML, it needs to be written as: reversed="reversed".
由于该列表中有 5 个列表项，该列表将从 5 倒数到 1。 reversed 属性是一个布尔属性。在 HTML 中，该值可以省略，但在 XHTML 中，需要写成：reversed="reversed"。
Source: https://dzone.com/articles/html-5-reverse-ordered-lists
回答by Amir Rezvani
check this link out ... you can use flex-direction: row-reverse;
检查此链接...您可以使用 flex-direction: row-reverse;
