修改

Question

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

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
List1 List2 list3 List4 List5

截至目前，我在我的网站上有此列表

<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讲座电影音乐ParadesandFestivals
  ParadesandFestivals老年人体育戏剧视觉艺术
  所有教会食品筹款活动

Answer 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

你应该使用flex：

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
List1 List2 list3 List4 List5

然后这应该有效：

请注意，您需要为列表项定义宽度，以使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>

Answer 2

使用Flex-box。简单来说就是这么简单。对于反向：

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

对于订单，您可以使用Flex-order：

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

我刚刚制作了样本。

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

Answer 3

您必须拆分列表并使用订单属性进行排列。这里我使用宽度为20％，因为你在第一行有5个元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

<!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>

＆＃13;

使用css以相反的顺序显示列表项

4 个答案:

修改