26
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:
Flexbox项目可以使用order属性以任意顺序显示：
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.
注意：李的第二个元素，即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属性允许灵活地按照自定义的视觉顺序排列灵活项，而不管它们在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解决方案可以解决所有问题。
26
4
0
我正在尝试创建一个简单的小部件，它只有一个切换按钮，但我的 AVD 模拟器上不断出现错误，提示“加载小部件有问题”。 似乎是因为我在小部件布局中添加了开关或切换按钮。 为了测试它，我创建了一个新的空
我正在使用 GLFW 进行键盘输入，但处理速度太快，因此我的 bool 开关在一次按下时被更改了 10 次，因为输入是每一帧处理的。我只需要按一次空格键即可切换状态。我当前的代码如下: if (glf
我希望完成一个相当简单的任务(我希望!) 我有两个 div 标签和一个 anchor 标签，像这样: forgot password? 我希望使用 anchor 标记在两个 div 标记之间切换，
我已经尝试了几种不同的方法，但似乎无法弄清楚如何将 span 的类从“die2”切换到“die3”以及将 div 的显示样式从“block”切换到“none”。有人有任何解决方案吗？ (基本上当页面加
我正在尝试制作一个交换小部件，该小部件显示两个不同的文本。激活时，它下面显示一个TextField，顶部是不可见的，而禁用时它上面显示一个Text，而底部是不可见。但是它没有在屏幕上显示任何内容，只是
我有一个简单的 Angular 应用程序，它使用两个模板和 Controller 。放置两个按钮来切换 View 。它们调用在控件内定义的函数，该函数使用 window.location='' 来切换
我想要一个 div 切换它的类(切换)onclick，然后再次恢复到原来的类 onclick 我的代码是: function myfunc() { //the code over here
我确信这是一个常见问题，我已经尝试了该网站上的许多线程来尝试解决我的问题，但我似乎无法使其正常工作。基本上我有一个子菜单，当父菜单悬停在其上时需要显示该子菜单，但是如果您在加载完成之前将鼠标从菜单项上
我制作了一个 JavaScript 函数来隐藏单击按钮时的链接及其在该函数中的工作 function toggle() { var ele = document.getElement
我正在使用我在 JS fiddle 上找到的这个脚本:http://jsfiddle.net/Q4PUw/2/ 当我点击切换链接时，它会切换框并显示它，但是，它会跳回页面顶部，然后我必须再次向下滚动才
我正在 GoDaddy 上的共享服务器 IP 上构建 Web 应用程序。该应用程序与验证请求服务器 IP 的房地产 API 进行对话。问题是在 GoDaddy 上，我们的 IP 被列为 X，但它实际上
我在 jquery 中有一个简单的脚本，可以在 时切换 div(显示和隐藏)。被点击(我正在使用 Bootstrap )。 HTML: Advanced search This is t
我有两个 NSWindows，其中都有一个 NSPanel。我想在按下按钮时切换窗口。如何才能做到这一点？我不再需要旧窗口，所以我只想显示新窗口。 最佳答案 要聚焦第二个窗口，只需调用: [windo
我尝试在单击切换时将选项添加到选择菜单，但如果再次单击(取消选择)，则可以将其删除。到目前为止，我可以在单击时向选择菜单添加单个值，但无法将其删除(切换添加切换删除) 这是我的代码: HTML
我正在尝试隐藏所属行。例如，如果您单击“子标题 1”，则将仅隐藏项目 1、项目 2 和项目 3 行。 示例: title Sub Title 1
似乎无法让它为我工作，任何人都可以为我提供帮助吗？ http://codepen.io/anon/pen/kABjC 这应该根据点击打开和关闭文本部分，它采用 ID #，它只是一个数字(1,2,3,4
我正在从一个文件复制到另一个文件，并且我可以看到 Excel 在源文件和目标文件之间切换(如闪烁)。我希望宏从源复制并粘贴到目标，而不在文件之间切换(我不想闪烁)。 这里我得到了我的 Excel VB
我正在尝试制作一个带切换功能的 Accordion ，现在看起来效果很好。作为 javascript 的新手，我希望得到一些帮助，那就是它的组合方式。 http://jsfiddle.net/z3wW
我正在尝试制作一个小脚本，其中屏幕将每 100 毫秒随机更改一次背景颜色，您可以通过按一个按钮来打开和关闭它。我可以让它开始，但我不能让它停止。 这是切换的主要代码: var on = -1; fun
我确信这里应该已经涵盖了这一点，但我一直无法找到专门涉及此问题的问题。 我在一个页面中有 2 个 div，就像这样...... ...content... ...content...
我是一名优秀的程序员,十分优秀！