Float:right reverses order of spans

Question

I have the HTML:

    Bookmix Offline
    

        
                      

              相关标签:
       
      

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Float the div right instead of the span elements?

Answer 6

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>