是否可以使用CSS3更改列表项的顺序? [英] Is it possible to change the order of list items using CSS3?

问题描述

是否可以使用CSS3更改列表项的顺序?

Is it possible to change the order of list items using CSS3?

例如，如果列表以1,2,3,4,5的顺序用HTML编码，但我希望它以5、1、2、3、4的顺序显示.

For example, if a list is coded in HTML in 1,2,3,4,5 order, but I want it to show in 5,1,2,3,4 order.

我正在使用CSS覆盖层来修改Firefox扩展，因此我不能只更改HTML.

I'm using a CSS overlay to modify a Firefox extension, so I can't just change the HTML.

HTML代码

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

推荐答案

您可以使用flexbox来实现.

You can do it using flexbox.

这是我为您创建的小提琴: https://jsfiddle.net/x56hayht/

Here's a fiddle I created for you: https://jsfiddle.net/x56hayht/

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}

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

根据csstricks:

According to csstricks:

order属性是灵活框布局"模块的子属性.

The order property is a sub-property of the Flexible Box Layout module.

Flex项的显示顺序与默认情况下在源文档中显示的顺序相同.

Flex items are displayed in the same order as they appear in the source document by default.

order属性可用于更改此顺序.

The order property can be used to change this ordering.

语法:

顺序:number

希望它会有所帮助.干杯！

Hope it helps. Cheers!

这篇关于是否可以使用CSS3更改列表项的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！