التعويم: ترتيب عكسي للامتدادات

بالنظر إلى ترميز 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;
}

يحتفظ هذا الحل بعنصر التسمية العائمة اليسرى أثناء عكس ترتيب الأزرار العائمة اليمنى، مما يؤدي إلى ترتيب العرض المطلوب.