Float: ordem reversa de spans à direita

Dada a marcação HTML:

    Bookmix Offline
    Settings
    Export
    Import

aplicando o CSS:

span.button {
    float: right;
}

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

resulta em uma ordem de exibição inesperada no navegador, com os intervalos sendo exibidos como "Importar configurações de exportação" em vez da ordem na fonte HTML.

Solução

Para resolver esse problema sem modificar o HTML, o CSS pode ser ajustado. Uma abordagem é inverter a ordem dos elementos flutuantes à direita:

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 solução retém o elemento de rótulo flutuante à esquerda enquanto inverte a ordem dos botões flutuantes à direita, resultando na ordem de exibição desejada.