फ्लोट के साथ स्पैन ऑर्डर को उलटना:दाएं

प्रदान किए गए HTML में, "बटन" वर्ग के साथ स्पैन को "फ्लोट: दाएं" के साथ स्टाइल किया गया है ," जिससे वे HTML संरचना से उल्टे क्रम में प्रदर्शित होते हैं। क्या HTML क्रम को बनाए रखने के लिए CSS को संशोधित किया जा सकता है?

इस समस्या के समाधान के लिए, दो सामान्य समाधान हैं जो CSS का उपयोग करके स्थिति में हेरफेर करते हैं:

विकल्प 1: HTML क्रम को उल्टा करें

स्पैन तत्वों को सीधे फ़्लोट करने के बजाय, उन्हें एक युक्त तत्व में लपेटें और दाईं ओर फ़्लोट करें। उदाहरण के लिए:

    Settings
    Export
    Import


#buttons {
    float: right;
}

इस मामले में, "फ्लोट: राइट" प्रॉपर्टी के साथ "बटन" डिव बटन स्पैन को शामिल करता है, जिससे उन्हें सही क्रम में प्रदर्शित करने की अनुमति मिलती है।

विकल्प 2: HTML ऑर्डर बनाए रखें

यदि वर्तमान HTML ऑर्डर बनाए रखना महत्वपूर्ण है, तो फ्लोटेड स्पैन के ऑर्डर को स्पष्ट रूप से निर्दिष्ट करने के लिए सीएसएस नियम जोड़ें। फ़्लोट किए गए तत्वों के प्रवाह को तोड़ने और उन्हें मूल HTML क्रम में प्रदर्शित करने के लिए बाध्य करने के लिए "स्पष्ट" संपत्ति का उपयोग करें:

span.button {
    float: right;
    clear: right;
}

"क्लियर: राइट" प्रॉपर्टी यह सुनिश्चित करती है कि कोई भी निम्नलिखित तत्व फ्लोटेड स्पैन के नीचे से शुरू होगा, जो राइट-एलाइनमेंट को समायोजित करते हुए एचटीएमएल ऑर्डर को प्रभावी ढंग से संरक्षित करेगा।