इसलिए मैं लाइन में <li> आइटम प्रदर्शित करना चाहता हूं। लेकिन जब मैं सीएसएस बुलेट में display:inline संपत्ति का उपयोग करता हूं तो छुपा हो जाता है। मैंने इसे Question से आजमाया।

एचटीएमएल

<div class="list">
        <ul class="list-inline">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>

और सीएसएस

.list{
   display: inline;
}
.list-inline li{
    margin: 10px;
    display: inline;
}

display: inline काम करने लगता है लेकिन गोलियां छुप जाती हैं। मैं इसे कैसे ठीक करूं? JSFiddle देखें

2
Tr0jAn 27 नवम्बर 2021, 11:38

3 जवाब

सबसे बढ़िया उत्तर

आप list-inline कक्षा के लिए display: flex; का उपयोग कर सकते हैं।

.list{
   display: inline;
}

.list-inline {
  display: flex;
}
.list-inline li{
    margin: 10px;
    /* display: inline; */
}
<div class="list">
        <ul class="list-inline">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
</div>
2
kian 27 नवम्बर 2021, 11:46
यह काम किया धन्यवाद!
 – 
Tr0jAn
27 नवम्बर 2021, 11:51

आप इस शैली का उपयोग कर सकते हैं।

.list{
    display: inline;
 }
 .list-inline li{
    margin: 10px;
 }
 .list-inline{
    display: flex;
 }

क्या यह आप चाहते हैं आप उल को एक फ्लेक्स बॉक्स बना सकते हैं! यदि आप css में बुलेट के बारे में अधिक जानना चाहते हैं, तो यह w3schools डॉक्स देखें

https://www.w3schools.com/css/css_list.asp

2
Ambareesh 27 नवम्बर 2021, 11:51

मुझे लगता है कि inline बुलेट को नकारता है, लेकिन ul घोषणा पर flex-direction: row; के साथ flex का उपयोग करने से वह प्रभाव पड़ेगा जिसकी आप तलाश कर रहे हैं...

ul {
  flex-direction: row;
  display: flex;
}

.list {
}

.list-inline li {
  margin: 10px;
}
<div class="list">
        <ul class="list-inline">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
</div>
2
Authentic Science 27 नवम्बर 2021, 11:51