用CSS反转列表?(项目,而不是编号.)

use*_*554 1 css

是否可以使用CSS反转列表?也就是说,没有 javascript.

这是来源:

<!DOCTYPE html>
<html>
<head>
<title>Reversed List</title>
<style type="text/css">
ol.reverse li { /* what goes here? */ }
</style>
</head>
<body>
<ol class="reverse">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

这应该是结果:

  1. 第三
  2. 第二
  3. 第一

(当谷歌搜索总是出现关于编号的问题,以及如何在HTML中显示反向排序的列表?看起来它也是关于编号的,即使我现在看到答案不是.)

Ori*_*iol 8

您可以使用flexbox进行反转:

.reverse {
  display: flex;
  flex-direction: column-reverse;
}
Run Code Online (Sandbox Code Playgroud)
<ol class="reverse" reversed>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
Run Code Online (Sandbox Code Playgroud)

  • 那就是(除了JS)AFAIK的唯一途径 (2认同)