Float: スパンの順序を右反転

HTML マークアップを指定すると:

    Bookmix Offline
    Settings
    Export
    Import

CSS の適用:

span.button {
    float: right;
}

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

ブラウザでは予期しない表示順序が発生し、スパンが HTML ソース内の順序ではなく「インポート エクスポート設定」として表示されます。

解決策

HTML を変更せずにこの問題を解決するには、CSS を調整します。 1 つのアプローチは、右のフロート要素の順序を逆にすることです。

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

この解決策は、左側のフローティング ラベル要素を保持しながら、右側のフロート ボタンの順序を逆にし、目的の表示順序を実現します。