如何仅使用 HTML 和 CSS 而不是 Jquery 进行升序和降序？答案

【问题标题】：How to do li ascending order and descending order using only HTML and CSS not Jquery?如何仅使用 HTML 和 CSS 而不是 Jquery 进行升序和降序？
【发布时间】：2016-12-30 17:45:30
【问题描述】：

如何仅使用 css 以相反的顺序制作此列表项

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

【问题讨论】：

你能扩展一下吗？你想反转一个数字列表吗？还是你想排序？还是什么？
http://stackoverflow.com/questions/25695000/how-to-display-a-reverse-ordered-list-in-html
HTML 和 CSS 是纯静态 UI 呈现格式。他们根本与订购无关。如果您纯粹有 HTML 和 CSS，请使用“Ctrl+X”和“Ctrl+V”来订购您的 HTML 代码？
@VipulNayee 有解决方案，但您必须更具体。您能否提供一些代码，如果您能提供一个您正在尝试的工作示例，那就太好了。

标签： html css

【解决方案1】：

@Vipul Nayee 请检查以下代码。

ul#top-to-bottom {
    position: absolute;
    width:50px;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
ul#top-to-bottom > li {
    width: 50px;
    height: 50px;
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
li#a {
    background:blue;
}
li#b {
    background:red;
}
li#c {
    background:purple;
}
li#d {
    background:green;
}

<ul id="top-to-bottom">
    <li id="a">List 1</li>
    <li id="b">List 2</li>
    <li id="c">List 3</li>
    <li id="d">List 4</li>
</ul>

【讨论】：