Flotador: orden inverso de tramos hacia la derecha

Dado el marcado HTML:

    Bookmix Offline
    Settings
    Export
    Import

aplicando el CSS:

span.button {
    float: right;
}

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

da como resultado un orden de visualización inesperado en el navegador, con los intervalos mostrados como "Configuración de importación y exportación" en lugar del orden en la fuente HTML.

Solución

Para resolver este problema sin modificar el HTML, se puede ajustar el CSS. Un enfoque es invertir el orden de los elementos flotantes derechos:

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

Esta solución conserva el elemento de etiqueta flotante izquierdo mientras invierte el orden de los botones flotantes derechos, lo que da como resultado el orden de visualización deseado.