Float : ordre inverse des étendues à droite

Étant donné le balisage HTML :

    Bookmix Offline
    Settings
    Export
    Import

application du CSS :

span.button {
    float: right;
}

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

entraîne un ordre d'affichage inattendu dans le navigateur, les étendues s'affichant sous la forme "Paramètres d'importation et d'exportation" au lieu de l'ordre dans la source HTML.

Solution

Pour résoudre ce problème sans modifier le HTML, le CSS peut être ajusté. Une approche consiste à inverser l'ordre des éléments flottants de droite :

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

Cette solution conserve l'élément d'étiquette flottant de gauche tout en inversant l'ordre des boutons flottants de droite, ce qui donne l'ordre d'affichage souhaité.