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和psuedo元素。

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;
}

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>

Answer 4

检查此链接... 您可以使用flex-direction：row-reverse;

enter link description here

Answer 5

如果要以降序而不是升序排列列表：
快速解答：reversed="reversed"。

请阅读下面的说明：

在以前的HTML版本中，实现此目的的唯一方法是在每个元素上放置一个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 DOCTYPEs中不允许使用value属性（尽管HTML 5解决了该问题并允许使用该值属性）新的标记非常简单：只需将反向属性添加到ol元素，然后可选地提供一个起始值。如果没有提供起始值，浏览器将计算列表项的数量，然后从该数量递减至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。反向属性是布尔属性。在HTML中，可以省略该值，但是在XHTML中，需要将其写为：reversed =“ reversed”。

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

Answer 6

使用这个希望对您有所帮助 现代浏览器支持它

<ol reversed="reversed" start="3">
   <li> lorem ipsum </li>
   <li> Lorem ipsum dollar amet </li>
   <li> dollar amet </li>
</ol>

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

6 个答案: