Float: Right Reversing Order of Spans

Given the HTML markup:

    Bookmix Offline
    Settings
    Export
    Import

applying the CSS:

span.button {
    float: right;
}

span.label {
    margin-left: 30px;
}

results in an unexpected display order in the browser, with the spans displaying as "Import Export Settings" instead of the order in the HTML source.

Solution

To resolve this issue without modifying the HTML, the CSS can be adjusted. One approach is to reverse the order of the right floated elements:

span.button:nth-child(1) {
    float: right;
}

span.button:nth-child(2) {
    float: right;
    margin-right: 5px;
}

span.button:nth-child(3) {
    float: right;
    margin-right: 10px;
}

span.label {
    margin-left: 30px;
}

This solution retains the left floated label element while reversing the order of the right floated buttons, resulting in the desired display order.