Float:right reverses order of spans

Question

I have the HTML:

    Bookmix Offline
    

        
                      

              相关标签:
       
      

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

div.outerclass {
  text-align: right;
}

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

Answer 6

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