Float: Reihenfolge der Spans nach rechts umkehren

Angesichts des HTML-Markups:

    Bookmix Offline
    Settings
    Export
    Import

Anwenden des CSS:

span.button {
    float: right;
}

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

führt zu einer unerwarteten Anzeigereihenfolge im Browser, wobei die Bereiche als „Import-Export-Einstellungen“ anstelle der Reihenfolge in der HTML-Quelle angezeigt werden.

Lösung

Um dieses Problem zu beheben, ohne den HTML-Code zu ändern, kann das CSS angepasst werden. Ein Ansatz besteht darin, die Reihenfolge der rechten schwebenden Elemente umzukehren:

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

Diese Lösung behält das linke schwebende Beschriftungselement bei, während die Reihenfolge der rechten schwebenden Schaltflächen umgekehrt wird, was zur gewünschten Anzeigereihenfolge führt.