CSS styling, how to show specific bullets in one line

Question

In the following example, I would like elements 2 and 3 to be displayed side by side, and the rest remain as an unordered list. How to do this in css?

<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> 

this code is shown below.

textone texttwo textthree textfour

But I want to show it like this picture below. How to do it in CSS?

Answer 1

A simple float and margin should do this.

 .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

If the flexbox parameter is an option, you can use the flexbox wrapper:

• Each flexibility item will have 100% flex-basis

• The second and third elements will have auto flex-basis

This will cause 2 and 3 to appear on the same line - see the demo below:

 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 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>