С плавающей запятой: правый обратный порядок интервалов

Учитывая HTML-разметку:

    Bookmix Offline
    Settings
    Export
    Import

применение CSS:

span.button {
    float: right;
}

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

приводит к неожиданному порядку отображения в браузере: диапазоны отображаются как «Настройки импорта и экспорта» вместо порядка в исходном HTML.

Решение

Чтобы решить эту проблему без изменения HTML, можно настроить CSS. Один из подходов — изменить порядок правильных плавающих элементов:

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

Это решение сохраняет плавающий элемент метки слева, изменяя порядок плавающих кнопок справа, что приводит к желаемому порядку отображения.