是否可以使用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)
这应该是结果:
(当谷歌搜索总是出现关于编号的问题,以及如何在HTML中显示反向排序的列表?看起来它也是关于编号的,即使我现在看到答案不是.)
您可以使用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)