क्षैतिज पंक्ति में <ul> प्रदर्शन कैसे करें

Question

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

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Comments

अच्छा प्रश्न। मुझे लगता है कि फोकस यहां वास्तव में है कैसे नवीनतम वेब मानकों के अनुरूप यह करने के लिए

— एंडी

Answer 1

सूची आइटम सामान्य रूप से ब्लॉक तत्व हैं। इनलाइन तत्वों को इन के माध्यम से चालू करेंdisplay संपत्ति के ।

आपके द्वारा दिए गए कोड में, display: inlineसंपत्ति को सूची आइटम पर लागू करने के लिए आपको एक संदर्भ चयनकर्ता का उपयोग करना होगा , बजाय सूची के ही ( display: inlineसमग्र सूची पर लागू होने का कोई प्रभाव नहीं होगा):

#ul_top_hypers li {
    display: inline;
}

यहाँ काम कर रहे उदाहरण है:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Comments

मैंने फ्लोट का उपयोग करके भी यह प्रभाव प्राप्त किया है, जिससे सूची आइटमों की ब्लॉक प्रकृति बनी रहे।

— जोएल

यह एक दिलचस्प दृष्टिकोण है, मेरा कहना है- हालाँकि, मुझे लगता है कि मार्जिन के साथ कुछ अनावश्यक झंझट पैदा होंगे और जैसे, आप प्रभावी रूप से सूची आइटम को बॉक्स मॉडल से बाहर निकाल रहे हैं।

— hbw

@htw: आप इसे किसी भी स्पष्ट समाधान के साथ गियर में वापस किक कर सकते हैं।

— एलेक्स

आप हमेशा प्रदर्शन का उपयोग कर सकते हैं: इनलाइन-ब्लॉक यदि आप ब्लॉक प्रकृति को बनाए रखना चाहते थे ... हालांकि यह इस चरण में पूरी तरह से समर्थित नहीं है (मेरा मानना ​​है कि यह एफएक्स 2 है जो प्रमुख अपराधी है)।

— जेम्स बी

Answer 2

आप उन्हें दाईं ओर फ़्लोट करने के लिए भी सेट कर सकते हैं।

#ul_top_hypers li {
    float: right;
}

यह उन्हें अभी भी ब्लॉक स्तर की अनुमति देता है, लेकिन एक ही पंक्ति में दिखाई देगा।

Comments

उन्हें दाईं ओर फ़्लोट करने से अतिरिक्त प्रभाव पड़ेगा: यह उनके क्रम को स्वैप करेगा ताकि बाएं से दाएं वे पहले से अंतिम हो जाएंगे।

— मैथ्यू जेम्स टेलर

आह हाँ, उन्हें मार्कअप (लेआउट / मार्कअप के पृथक्करण के लिए बहुत कुछ) में

— उलटने की आवश्यकता होगी

Answer 3

उस सूची के लिए displayसंपत्ति सेट करें जिस पर inlineआप इसे लागू करना चाहते हैं। सूची सूची के अलावा सूची प्रदर्शित करने का एक अच्छा विवरण है ।

Answer 4

जैसा कि @alex ने कहा, आप इसे सही तरीके से फ्लोट कर सकते हैं , लेकिन यदि आप मार्कअप को रखना चाहते हैं, तो इसे बाईं ओर फ्लोट करें!

#ul_top_hypers li {
    float: left;
}

Answer 5

यह आपके लिए काम करेगा:

#ul_top_hypers li {
    display: inline-block;
}

Answer 6

दूसरों के रूप में उल्लेख किया है, तो आप सेट कर सकते हैं liकरने के लिए display:inline;, या बाईं या दाईं। इसके अतिरिक्त, आप पर भी उपयोग कर सकते हैं । नीचे स्निपेट में मैंने भी जोड़ाfloatlidisplay:flex;uljustify-content:space-around इसे और अधिक स्पेस देने के लिए ।

Flexbox के बारे में अधिक जानकारी के लिए, इस संपूर्ण मार्गदर्शिका को देखें ।

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Answer 7

#ul_top_hypers li {
  display: flex;
}