Float:right reverses order of spans

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.

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

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