यूएल सूची को एक पंक्ति में कैसे शैली दें

Question

मैं इस सूची को एक पंक्ति में प्रस्तुत करना चाहता हूं।

• सूची आइटम 1
• सूची आइटम 2

के रूप में दिखाया जाना चाहिए

* सूची आइटम 2 * सूची आइटम 2

क्या सीएसएस शैली का उपयोग करने के लिए?

Comments

मुझे पता है कि यह सवाल बूटस्ट्रैप के लिए विशिष्ट नहीं है, लेकिन मुझे बूटस्ट्रैप थंबनेल पाठ, चित्र, वीडियो आदि की क्षैतिज सूची के लिए बहुत उपयोगी लगते हैं

— अनुपम

Answer 1

ul li{
  display: inline;
}

अधिक सूची के विकल्प के लिए और सूची में एक बुनियादी क्षैतिज सूची देखें। ( लिंक के लिए नीचे डैनियल सीधे धन्यवाद )।

इसके अलावा, जैसा कि टिप्पणियों में बताया गया है, आप शायद उल पर स्टाइल करना चाहते हैं और जो भी तत्व अच्छा दिखने के लिए चीजें प्राप्त करने के लिए और ली के खुद के अंदर जाते हैं।

Comments

जबकि यह काम पूरा हो जाता है, आप तत्वों को अच्छी तरह से रखने के लिए कुछ पैडिंग भी शामिल करना चाहेंगे

— रोब एलन

सही, यह सूची को क्षैतिज बनाता है। आप शायद ul, li और जो कुछ भी अच्छा लगता है बनाने के लिए li में कुछ और अधिक स्टाइल जोड़ना चाहते हैं।

— आरजे।

रहने के लिए गोलियां कैसे प्राप्त करें? या हम किसी और तरीके से गोलियां चला सकते हैं।

— आरडी

जैसा कि @DotDot बताते हैं: {डिस्प्ले: इनलाइन} का उपयोग करके बुलेट स्टाइल को हटा दिया जाता है। इसके आस-पास प्राप्त करें: 1. इसके बजाय {फ्लोट: लेफ्ट} का उपयोग करें (हालांकि IE9 पर काम नहीं कर रहा है)। 2. एक बायाँ-पैडिंग जोड़ें और एक पृष्ठभूमि छवि जोड़ें (यह एक पृष्ठभूमि छवि के रूप में बुलेट है)।

— एड्रिएन रहो

Answer 2

आधुनिक ब्राउज़रों में आप निम्नलिखित (CSS3 अनुरूप) कर सकते हैं

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Answer 3

HTML कोड:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

सीएसएस कोड:

ul.list li{
  width: auto;
  float: left;
}

Answer 4

कुछ इस तरह से भी प्रयोग करके देखें:

एचटीएमएल

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

सीएसएस

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

मैंने चित्रण करने के लिए एक कोडपेन बनाया: http://codepen.io/agm1984/pen/mOxaEM

Answer 5

में बूटस्ट्रैप उपयोग .list-inlineसीएसएस वर्ग

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h