25
4
Is there a way to switch the display order of specific list items? For example, with the following list, can the order of the second and third items be switched when displayed?
有没有办法切换特定列表项的显示顺序？例如，在下面的列表中，第二项和第三项在显示时是否可以切换顺序？
The list:
名单如下：
个人中心
文章发布
退出 <ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
How I want it displayed:
我希望它如何显示：
only with css ? (see tag)
只有css吗？(请参阅标签)
Why do you want to do such a thing?
你为什么要做这样的事情？
You can easily change the display order of the elements with CSS, but not the HTML order. Do you just want to change the display order?
您可以使用CSS轻松更改元素的显示顺序，但不能更改HTML顺序。是否只想更改显示顺序？
Its on wordpress plugin that's why.
它在WordPress插件上，这就是为什么。
Flexbox items can be displayed in an arbitrary order by using the order property:
通过使用Order属性，可以按任意顺序显示Flexbox项：
ul {
display: flex;
flex-direction: column;
}
li:nth-child(2) {
order: 2;
}
li:nth-child(3) {
order: 1;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
You can simply do it by using below 2 steps:
您只需使用以下两个步骤即可完成：
ul {display : flex; flex-direction: column;} this will make list in column.
As you want to change order of only second child you can useli:nth-child(2) { order: 2;} this will change order of B to third and C to second.
Note: Second Element of li which is B will render at last as we have not assigned order to it.
注：Li的第二个元素是B，因为我们没有给它分配顺序，所以最后将呈现它。
Thanks...
谢谢..。
ul {
display: flex;
flex-direction: column;
}
li:nth-child(2) {
order: 2;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
The order property in Flexbox grants the flexibility to arrange flex items in a customized visual order, irrespective of their original placement in the HTML structure.
Flexbox中的Order属性提供了以自定义视觉顺序排列Flex项的灵活性，而不考虑它们在HTML结构中的原始位置。
ul {
display: flex;
flex-direction: column;
}
li:nth-child(2) {
order: -1; /* Reverse the order of the second child */
}
li:nth-child(3) {
order: -2; /* Reverse the order of the third child */
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
I think OP wants css only answer.
我认为OP只想要css的答案。
The ugly css solution won't work if the text is too long. I think css only support for 1 height. But js solution can solve everything.
如果文本太长，难看的css解决方案将不起作用。我认为css只支持1个高度。但js解决方案可以解决所有问题。
25
4
0
这里我试图在 FlatList 中显示一个名为“posts”的数组。 render() { console.log(this.props.posts); return (
这是我的代码: {{day(list)}} {{list.weather[0].description}}
我是 Mahout 的新手，并且仍在使用它。 我的问题是，将 Item-Item 和 User-Item 结合起来是否合适？ 我的用例是，一个社交网络应用会尝试根据用户历史数据(优先级较高)为当前用户
下午好， 我按数据库搜索以测试特定类测试，当我放置一个新项目时，如果列表包含该项目。 @Test public void insertAndDeleteTask() throws Interrupte
我有一个关于 ionic 框架的问题，我希望有人能帮助我...我有一个带有“ion-item-right”的 ionic 列表。这一切都可以，按钮在右边。现在我需要其他三个居中的图标，这样我就有了:文
我经常遇到类似下面的代码: if ( items != null) { foreach(T item in items) { //... } } 基本上，if 条件确
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
这个问题已经有答案了: Type mismatch: cannot convert from Item to Item (1 个回答) 已关闭 7 年前。 我很困惑。我无法将外部类的实例变量 Node
我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。 || || || 当页面宽度缩小时: | | ||
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
public class Document extends Model { ... @ManyToMany public Set accessors; ... } 我想选择访问者包含某个用户的所有文档
我正在使用 selenium webdriver 为单页 Web 应用程序开发一个 Java 框架，使用以下模式:PageObject、SlowLoadableComponent(责任链)、PageF
最近在学习C，在网上发现了一个问题。问题是: What is the problem with this function in terms of memory allocation? What is
我有这个代码 ( -1 ? true : false} /> {genre.item.name}
在ASP.Net中使用DataGrid时真的没有快捷方法吗 (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.A
我正在使用工作流程根据数据和一组要求将大量 pdf 从一个位置复制到其他大坝位置。我正在使用以下代码 Assets damAsset = manager.createAsset(path, is, m
我是 PowerShell 的新手。 我正在尝试自动将 dll 组件从源服务器上的文件夹部署到目标服务器上的多个文件夹。这看起来应该很简单:将组件从源服务器上的源(部署)文件夹复制到目标服务器上的文件
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我是一名优秀的程序员,十分优秀！