html - 有序列表的反向显示

Question

我想反转有序列表的显示顺序(不显示枚举值)。 (列表不一定非得是有序列表，可以是无序的)

这是一个例子:

<ol> Ordered list
    <li> Last item
    <li> Second-to-last item
    <li> Middle item
    <li> Second item
    <li> First item
</ol>

显示如下:

1. Last item
2. Second-to-last item
3. Middle item
4. Second item
5. First item

使用 <ol reversed>看起来像这样:

5. Last item
4. Second-to-last item
3. Middle item
2. Second item
1. First item

所以数字没问题，但是顺序还是不对。无论如何实际上首先显示第一个元素？编号对我来说并不重要，我可以使用 <ul> , 但我想 <ol>描绘了我想要做得更好。

不，我不能只将第一个元素移动到列表的顶部:p 我的 foreach 循环不是那样工作的。

编辑:请阅读问题，这不是重复的:)

Answer 1

带有 flex-direction:column-reverse 的 flex 盒子会为你做这个:

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

工作 jsFiddle example

结果:

5. First item
4. Second item
3. Middle item
2. Second-to-list item
1. Last item

此外，不要忘记关闭您的 <li>标签。