[英]How can I get my div inside my li element to appear first with css
I am trying to get my div to appear on it's own line and force the li to the next line. 我试图让我的div出现在它自己的行上,并将li强制到下一行。 I can't change the html or reorganize the elements. 我无法更改html或重新组织元素。 It needs to be a css only solution. 它必须是仅CSS的解决方案。
Here is an example: https://fiddle.jshell.net/129rgqr7/ 这是一个示例: https : //fiddle.jshell.net/129rgqr7/
The current output looks like this: 当前输出如下所示:
Racquet Sports - Tennis
I want the output to look like this: 我希望输出看起来像这样:
Racquet Sports
Tennis
Cleared the answer to make it more readable: 清除了答案,使其更具可读性:
li {display:flex;flex-direction:column;list-style-type:none;}
li div {order:1;}
li span {order:2;}
And here's the Jsfiddle: https://fiddle.jshell.net/6puvsmn8/ 这是Jsfiddle: https ://fiddle.jshell.net/6puvsmn8/
You can use any of the techniques described in this article which also allows you to reorder the elements. 您可以使用本文中介绍的任何技术,它们也可以使元素重新排序。 Easiest with best browser support is perhaps: 最好的浏览器支持最简单的方法可能是:
li {
display: table;
}
#group {
display: table-header-group;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.