Float:right reverses order of spans

I have the 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:

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?

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

div.outerclass {
  text-align: right;
}

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

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

very easy!

div.outerclass {
	float: right;
}

div.innerclass {
	float: left;
}

Just use display:inline-block and text-align:right instead of float:right:

div { text-align:right }

span { display:inline-block }

Float the div right instead of the span elements?

Or you can use the 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>

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.

So for instance, if the div is the only div within a container with the id (say) "navigation", that might be:

#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 child of the navigation container, you can use a child selector instead of a descendant selector:

#navigation > div {
    text-align: right;
}
#navigation > div span.label {
    float: left;
}

This works without rearranging the html and is very simple. Heres a working example: http://jsfiddle.net/dzk7c/2/

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:

div {
    float:right;
}

span {
    display: inline-block;
}

maybe this, for someone...

http://jsfiddle.net/15abbg81/

only horizontal, may be to use: rtl/ltr of tables should work in all browsers that support table-cell css

normal:

<div class="container">
    <section>1</section>
    <article>2</article>
    <aside> <span>א</span><span>.</span> </aside>
</div>
<style>
.container { display: table; 
    direction:ltr; /*ltr here is not required*/
    }
.container>* {
    display: table-cell; /*only works with table-cell*/
    direction:ltr; /*ltr here is not required*/
}
</style>

reverse:

<div class="reverse">
    <div class="container">
        <section>1</section>
        <article>2</article>
        <aside> <span>א</span><span>.</span> </aside>
    </div>
</div>

<style>
    .reverse .container { display: table;  direction:rtl } /*change the outside direction to rtl*/
    .reverse .container>* {
        display: table-cell;
        direction:ltr /*inside switch back to ltr if needed*/
    }
</style>

    

It might be achieved using flex margin positioning. Please note that this will work only on IE10+

div
{
    display: flex;  
}

span.label {
    margin: auto;
    margin-left: 0;
}

span.button {    
    margin-right: 5px;
}

I get also stuck with this... so here is my sollution

I had this Before and want this After

HTML looks like this

<ul class="visible-xs restaurant-thumbnail__tags list-inline">
    @foreach($restaurant->categories as $category)
        <li>{{ $category->title }}</li>
    @endforeach
    @foreach($restaurant->labels as $label)
        <li>{{ $label->title }}</li>
    @endforeach
</ul>

CSS looks like this

.restaurant-thumbnail__tags {
    direction: rtl;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
.restaurant-thumbnail__tags li {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

html

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

css

div{ 
    width:300px; 
    border:1px solid #000; 
    overflow:hidden; 
}
ul{
    padding:0;
    margin:0;
    float:right;
}
li{
    border:1px solid #000;
    text-align:center;
    float:left;
    margin:20px 5px;
    padding:5px;
    width:25px;
    list-style:none;
}

you would need to float the spans left, and float the parent container right.

this will depend on the kind of layout you are trying to achieve however.

it's intended behaviour, for the benefit of screen readers and the like I imagine. the other option is to adjust the mark-up, but this, as you say, may not be desirable.