फ्लोट: स्पैन का सही उलटा क्रम

HTML मार्कअप को देखते हुए:

    Bookmix Offline
    Settings
    Export
    Import

सीएसएस लागू करना:

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

यह समाधान दाएं फ्लोटेड बटन के क्रम को उलटते हुए बाएं फ्लोटेड लेबल तत्व को बरकरार रखता है, जिसके परिणामस्वरूप वांछित प्रदर्शन क्रम प्राप्त होता है।