CSS Positioning and Display Order -

मेरे पास HTML का एक ब्लॉक है:

  & lt; ul & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; ख & lt; / li & gt; & Lt; li वर्ग = "नेविगेशन" & gt; c & lt; / li & gt; & Lt; li वर्ग = "नेविगेशन" & gt; डी & lt; / li & gt; & Lt; / ul & gt;  

और एक सीएसएस नियमः

  ul li {display: inline; } Li.nav {float: right; }  

जो मेरे इरादों से नहीं बर्ताव कर रहे हैं: मुझे यह दिखाना चाहिए जैसे:

  ab cd  

लेकिन इसके बजाय यह

  ab डीसी  

अंतर तत्वों का प्रदर्शित क्रम है वर्ग "एनएवी" की सूची की वस्तुओं को उनके वाक्य-रचनात्मक क्रम में कैसे प्रदर्शित किया जा सकता है?

ठीक है, स्पष्ट त्वरित ठीक सूची में तत्वों के क्रम को उल्टा करने के लिए है:

  & lt; ul & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; ख & lt; / li & gt; & Lt; li वर्ग = "नेविगेशन" & gt; डी & lt; / li & gt; & Lt; li वर्ग = "नेविगेशन" & gt; c & lt; / li & gt; & Lt; / ul & gt;  

मुझे लगता है कि क्या होता है यह है कि जब भी रेंडरिंग इंजन float: right के साथ एक तत्व का सामना करता है, तब तक उस तत्व को यथासंभव सही के रूप में धकेलता है तो यह पहली बार "सी" का सामना करता है और धक्का देता है कि सभी तरह से दायीं ओर, फिर इसे "डी" का सामना करना पड़ता है और यह संभव है कि कहीं भी संभव हो - लेकिन "सी" पहले से सबसे ऊपरी भाग पर कब्जा कर रहा है, इसलिए "d "इसके बाईं ओर रहता है मूलतः, तत्वों को बाएं से दायें क्रम के बजाय दाईं ओर से बाएं क्रम में रखा जाता है।

एक और विकल्प, मुझे लगता है कि तत्वों को दो सूचियों में विभाजित करना होगा और बस < कोड> फ्लोट: सही शैली को पूरी सूची के रूप में (अर्थात & lt; ul & gt; तत्व)।

  & lt; ul & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; ख & lt; / li & gt; & Lt; / ul & gt; & Lt; ul class = "nav" & gt; & Lt; li & gt; सी & lt; / li & gt; & Lt; li & gt; घ & lt; / li & gt; & Lt; / ul & gt;  

और

<प्री> ul li {display: inline; } Ul.nav {float: right; }

इस तरह से यह सूची सही दायरे पर तैरती है लेकिन इसमें तत्वों के क्रम को उलट नहीं किया जाएगा।