सीएसएस स्टाइलिंग एक पंक्ति में विशिष्ट गोलियां कैसे दिखाएं

Question

निम्नलिखित उदाहरण में मैं आइटम 2 और 3 को साइड-साइड के साथ दिखाना चाहता हूं और शेष एक स्टैक्ड अनॉर्डर्ड सूची के रूप में बने रहना चाहते हैं। सीएसएस में यह कैसे करें?

<li><i class="icon-caret-right"></i>textone</li> 
 
<li><i class="icon-caret-right"></i>texttwo</li> 
 
<li><i class="icon-caret-right"></i>textthree</li> 
 
<li><i class="icon-caret-right"></i>textfour</li>

इस कोड को इस नीचे की तरह दिखाता है।

textone

texttwo

textthree

textfour

लेकिन मैं नीचे इस छवि के रूप में यह दिखाना चाहते हैं। सीएसएस में यह कैसे करें?

Answer 1

एक साधारण नाव और एक मार्जिन यह करना चाहिए।

.stack { 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
}

<li><i class="icon-caret-right"></i>textone</li> 
 
<li class="stack"><i class="icon-caret-right"></i>texttwo</li> 
 
<li><i class="icon-caret-right"></i>textthree</li> 
 
<li><i class="icon-caret-right"></i>textfour</li>

Answer 2

तो flexbox एक विकल्प है, तो आप उपयोग कर सकते हैं एक लपेटकरflexbox:

1. प्रत्येक फ्लेक्स आइटम 100% flex-basis

2. दूसरा होगा और तीसरे आइटम एच ​​होगा एवेन्यू ऑटोflex-basis

यह 2 और 3 एक ही पंक्ति में आने के लिए कर देगा - डेमो नीचे देखें:

ul { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
} 
 
ul > li { 
 
    flex: 1 1 100%; 
 
} 
 
ul > li:nth-child(2), ul > li:nth-child(3) { 
 
    flex: 1 1 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<ul> 
 
    <li>textone</li> 
 
    <li>texttwo</li> 
 
    <li>textthree</li> 
 
    <li>textfour</li> 
 
</ul>

Answer 3

ul { 
 
    /* removing bullet */ 
 
    list-style-type: none; 
 
} 
 

 
li:before { 
 
    /* adding bullet as pseudoelement's content */ 
 
    content: "• "; 
 
} 
 

 
li:nth-child(2), 
 
li:nth-child(3) { 
 
    /* display item as inline or inline-block */ 
 
    display: inline-block; 
 
}

<ul> 
 
    <li><i class="icon-caret-right"></i>textone</li> 
 
    <li><i class="icon-caret-right"></i>texttwo</li> 
 
    <li><i class="icon-caret-right"></i>textthree</li> 
 
    <li><i class="icon-caret-right"></i>textfour</li> 
 
</ul>