浮动:右转逆转跨度

Question

我有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>

和CSS:

span.button {
    float:right;
}

span.label {
    margin-left: 30px;
}

在浏览器中,跨度以相反的顺序显示:导入导出设置.我可以通过仅更改CSS文件并保持HTML原样来更改顺序吗？

Answer 1

这个问题的一般解决方案是要么颠倒HTML中右浮动元素的顺序,要么将它们包装在一个包含元素中,然后将其浮动到右边.

Answer 2

如果您想使列表项正确对齐而不撤消订单,请不要浮动列表项.让它们内联而不是.text-align:对你的跨度

div {
    text-align:right;
}

span {
    display:inline;
}

Answer 3

是的,这可以通过您的确切标记来完成.

诀窍是使用 direction: rtl;

标记

<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

div
{
    direction: rtl;   
}

span.label {

    float: left;
    margin-left: 30px;
}

小提琴

Answer 4

div.outerclass {
  text-align: right;
}

div.outerclass .label {
  float: left;
   text-align: left;
}

Answer 5

好简单！

div.outerclass {
    float: right;
}

div.innerclass {
    float: left;
}

Answer 6

更新：两个轻量级 CSS 解决方案：

使用flex、flex-flow和order：

示例 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;
    }

或者，反转 Y 比例：

示例 2：演示小提琴

div {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
span {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    display:inline-block;
    width:100%;
}