如何在HTML中显示反向sorting列表?

我需要你快速的帮助。 有什么办法在CSS / SCSS显示反向sorting列表。 像这样的东西:

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. 

3 Solutions collect form web for “如何在HTML中显示反向sorting列表?”

你可以旋转父元素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); } 

您可以使用flexbox来实现这一点。 它允许您通过flex-direction属性来颠倒顺序。

 ol { display: flex; flex-direction: column-reverse; } li { flex: 0 0 auto; } 
  • 规范
  • 现场演示
  • 有限的浏览器支持
 <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的例子
  • 使函数等到元素存在
  • 标签:.ico或.png /正确的标签?
  • Symfony2禁用HTML5表单validation
  • 为什么<big>不在HTML 5 Tag列表中,<Small>是?
  • 如何testing浏览器是否支持原生占位符属性?
  • 帆布教程/参考
  • 实时数据在html5的线形图上绘制graphics
  • 如何将HTML5 Canvas作为图像保存在服务器上?
  • Safari和Firefox中的HTML5video(mp4和ogv)问题 - 但是Chrome都很好
  • 什么是咏叹调标签,我该如何使用它?
  • 检索HTML5video时间的问题