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?
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.
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.
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With