【问题标题】：displaying the list items in reverse order using css使用 css 以相反的顺序显示列表项
【发布时间】：2017-10-31 08:43:26
【问题描述】：

我在我的网页中显示类别。无论我从后端添加什么，它都会显示在列表中，但我需要这种格式的列表。

HTML：

<ul>
 <li>List 1</li>
 <li>List 2</li>
 <li>List 3</li>
 <li>List 4</li>
 <li>List 5</li>
 <li>List 6</li>
 <li>List 7</li>
 <li>List 8</li>
 <li>List 9</li>
 <li>List 10</li>
</ul>

CSS

ul {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

ul > li {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
display:inline-block;
}

这是我的fiddle 链接

目前显示为

List10 List9 list8 List7 List6 List5 Lst 4 List3 List2 List1

但对我来说它应该以这种格式显示

List6 List7 list8 List9 List10
列表 1 列表 2 列表 3 列表 4 列表 5

现在我的网站上有这个列表

<ul id="legend">
    <li ><span>All</span></li>
    <li ><span>Church</span></li>
    <li ><span>Food </span></li>
    <li ><span>Fund&nbsp;Raisers</span></li>
    <li ><span>Games&nbsp;and&nbsp;Contests</span></li>
    <li ><span>Health&nbsp;and&nbsp;Wellness</span></li>
    <li ><span>Lectures</span></li>
    <li ><span>Movies</span></li>
    <li><span>Music</span></li>
    <li><span>Parades&nbsp;and&nbsp;Festivals</span></li>
    <li ><span>Seniors</span></li>
    <li><span>Sports</span></li>
    <li><span>Theatrical </span></li>
    <li><span>Visual&nbsp;Arts</span></li>
</ul>

输出应该是

HealthandWellness Lectures 电影音乐 ParadesandFestivals
ParadesandFestivals 老年人体育戏剧视觉艺术
所有教会食品筹款游戏

【问题讨论】：

你用 Javascript 试过了吗？
您以这种方式旋转元素有什么特别的原因吗？无论如何，您可以通过将 display: flex; flex-direction: row-reverse; justify-content: flex-end; 添加到您的无序列表 (ul) 来达到预期的效果。
跟进@UncaughtTypeError 的评论 - 您还可以使用 css flexbox 订单将列表中的项目重新排序为您想要的格式。这只有在列表中有 10 个项目时才有效

标签： html css

【解决方案1】：

如果你只想颠倒顺序，你可以使用direction属性

ul {
  direction: rtl;
  text-align: left;
}
li {
  display: inline;
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

但是如果你想这样改变它：

List6 List7 list8 List9 List10 List1 List2 list3 List4 List5

你应该使用弹性：

ul {
  list-style: none;
  display: flex;
}
li {
  order: 2;
}
li:nth-child(n+6) {
  order: 1;
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

编辑

正如评论，您正在寻找两行：

List6 List7 list8 List9 List10
列表 1 列表 2 列表 3 列表 4 列表 5

那么这应该可以工作：

请注意，您需要为列表项定义宽度以使flex-wrap 起作用。

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
li {
  width: 20%;
  order: 2;
}

li:nth-child(n+6) {
  order: 1;
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

【讨论】：

我刚刚看到你想要两行...让我改变一下
你确定方向吗？它什么也没做
@TemaniAfif，确实如此，查看源 (1,2,3,...) 和结果 (10,9,8,...)
@TemaniAfif，如果你运行sn-p，那么结果应该是(10,9,8,...)...你用的是什么浏览器？
老兄，为什么不直接问它......如果你稍微调整一下，给定的解决方案也可以应用于此。在询问之前您可能想自己尝试一些东西......

【解决方案2】：

使用弹性盒。这很简单。仅用于反向：

ul{display:flex; flex-direction:row-reverse; }

对于订单你可以使用弹性订单：

ul {display:flex; } ul > li {flex:1; order:2;}

我刚刚创建了一个示例。

反向：https://css-tricks.com/almanac/properties/f/flex-direction/
订购：https://developer.mozilla.org/en-US/docs/Web/CSS/order

【讨论】：

【解决方案3】：

您必须使用 order 属性拆分列表并排列它们。这里我使用宽度为 20%，因为第一行有 5 个元素

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(n+6) {
  order: 1;
}
   
li {
  width: 20%;
  order: 2;
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
  <li>List 7</li>
  <li>List 8</li>
  <li>List 9</li>
  <li>List 10</li>
</ul>

【讨论】：

【解决方案4】：

ul {
list-style-type: none;
direction:rtl;
}
.abc{
text-align:right;
display:inline-block;
}
.lineB{
float:right;
}
.lineA{
float:left;
}

<!DOCTYPE html>
<html>
<body>
<div class="abc">
<ul>
    <li class="lineB">List 1</li>
    <li class="lineB">List 2</li>
    <li class="lineB">List 3</li>
    <li class="lineB">List 4</li>
    <li class="">List 5</li>
    <li class="lineA">List 6</li>
    <li class="lineA">List 7</li>
    <li class="lineA">List 8</li>
    <li class="lineA">List 9</li>
    <li class="lineA">List 10</li>
</ul>
</div>

</body>
</html>

【讨论】：

现在检查，可以吗？
不，我已经更新了我的问题，您可以检查一下吗