CSS Float:right 反转跨度的顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4224476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float:right reverses order of spans
提问by demas
I have the HTML:
我有 HTML：
<div>
<span class="label"><a href="/index/1">Bookmix Offline</a></span>
<span class="button"><a href="/settings/">Settings</a></span>
<span class="button"><a href="/export_all/">Export</a></span>
<span class="button"><a href="/import/">Import</a></span>
</div>
and CSS:
和 CSS：
span.button {
float:right;
}
span.label {
margin-left: 30px;
}
In the browser, spans display in the reverse order: Import Export Settings. Can I change the order by changing only the CSS file and leave the HTML as is?
在浏览器中，跨度以相反的顺序显示：导入导出设置。我可以通过仅更改 CSS 文件来更改顺序并保持 HTML 不变吗？
回答by Marcus Whybrow
The general solution to this problem is either to reverse the order of the right floated elements in the HTML, or wrap them in a containing element and float that to the right instead.
这个问题的一般解决方案是颠倒 HTML 中右侧浮动元素的顺序，或者将它们包装在一个包含元素中并将其向右浮动。
回答by Dil A
If you want to make your list items aligned right without reversing the order dont floatyour list items. Make them inlineinstead. text-align:right your span
如果您想让您的列表项正确对齐而不颠倒顺序，请不要浮动您的列表项。让他们内联代替。text-align:right 你的span
div {
text-align:right;
}
span {
display:inline;
}
回答by Danield
Yes, this can be done with your exact markup.
是的，这可以通过您的确切标记来完成。
The trick is to use direction: rtl;
诀窍是使用 direction: rtl;
Markup
标记
<div>
<span class="label"><a href="/index/1">Bookmix Offline</a></span>
<span class="button"><a href="/settings/">Settings</a></span>
<span class="button"><a href="/export_all/">Export</a></span>
<span class="button"><a href="/import/">Import</a></span>
</div>
CSS
CSS
div
{
direction: rtl;
}
span.label {
float: left;
margin-left: 30px;
}
回答by SW4
Update: Two lightweight CSS solutions:
更新：两个轻量级 CSS 解决方案：
Using flex, flex-flowand order:
Example1: Demo Fiddle
示例 1：演示小提琴
div{
display:flex;
flex-flow: column;
}
span:nth-child(1){
order:4;
}
span:nth-child(2){
order:3;
}
span:nth-child(3){
order:2;
}
span:nth-child(4){
order:1;
}
Alternatively, reverse the Y scale:
或者，反转 Y 比例：
Example2: Demo Fiddle
示例 2：演示小提琴
div {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
span {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
display:inline-block;
width:100%;
}
回答by RoToRa
div.outerclass {
text-align: right;
}
div.outerclass .label {
float: left;
text-align: left;
}
回答by xxxbence
very easy!
好简单！
div.outerclass {
float: right;
}
div.innerclass {
float: left;
}
回答by Dan Grossman
Float the div right instead of the span elements?
向右浮动 div 而不是 span 元素？
回答by T.J. Crowder
Answering your updated question:
回答您更新的问题：
path to div {
text-align: right;
}
path to div span.label {
float: left;
}
I say "path to div" above because you need to adequately target this one div, which doesn't (according to your quoted code) have a class or ID of its own. That's not a problem if we can do it with structure.
我在上面说“div 的路径”是因为您需要充分定位这个 div，它（根据您引用的代码）没有自己的类或 ID。如果我们可以用结构来做到这一点，那不是问题。
So for instance, if the divis the only div within a container with the id (say) "navigation", that might be:
因此，例如，如果div是容器中唯一带有 id（例如）“导航”的 div，则可能是：
#navigation div {
text-align: right;
}
#navigation div span.label {
float: left;
}
Or if there are other divs in the container, but this is the only one that's a direct childof the navigation container, you can use a child selector instead of a descendant selector:
或者，如果容器中有其他 div，但这是导航容器的唯一直接子级，则可以使用子选择器而不是后代选择器：
#navigation > div {
text-align: right;
}
#navigation > div span.label {
float: left;
}
回答by Mike
Just use display:inline-block and text-align:right instead of float:right:
只需使用 display:inline-block 和 text-align:right 而不是 float:right：
div { text-align:right }
span { display:inline-block }
回答by ng trong Minh
Or you can use the flex display
或者你可以使用 flex display
div {
display: flex;
justify-content: flex-end;
}<div>
<span class="label"><a href="/index/1">Bookmix Offline</a></span>
<span class="button"><a href="/settings/">Settings</a></span>
<span class="button"><a href="/export_all/">Export</a></span>
<span class="button"><a href="/import/">Import</a></span>
</div>