Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Float:right reverses order of spans

Tags:

css

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?

like image 536
ceth Avatar asked Nov 19 '10 11:11

ceth


People also ask

In what direction float will work?

As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.

How do you align a span to the right?

Solutions with CSS properties If you want to align a <span> element to the right of the <div>, you can use some CSS. Particularly, you need to use the float property with the “right” and “left” values.


1 Answers

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.

like image 118
Marcus Whybrow Avatar answered Sep 29 '22 12:09

Marcus Whybrow