Float:right reverses order of spans

Solution 1:

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.

Solution 2:

If you want to make your list items aligned right without reversing the order dont float your list items. Make them inline instead. text-align:right your span

div {
    text-align:right;
}

span {
    display:inline;
}

Solution 3:

Yes, this can be done with your exact markup.

The trick is to use 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

div
{
    direction: rtl;   
}

span.label {

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

FIDDLE

Solution 4:

div.outerclass {
  text-align: right;
}

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

Solution 5:

Update: Two lightweight CSS solutions:

Using flex, flex-flow and order:

Example1: Demo Fiddle

    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:

Example2: Demo Fiddle

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