CSS Stylizowanie sposobu wyświetlania określonych punktorów w jednym wierszu

Question

W poniższym przykładzie chciałbym, aby elementy 2 i 3 pojawiały się obok siebie, a pozostałe pozostałyby jako lista nieuporządkowana. Jak to zrobić w 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>

ten kod pokazuje jak ten poniżej.

textone

texttwo

textthree

textfour

Ale chcę pokazać to, jak ten obrazek poniżej. Jak to zrobić w CSS?

Answer 1

Prosty pływak i margines powinien to zrobić.

.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

Jeśli flexbox jest opcją, można użyć owijaniaflexbox:

1. Każdy element elastyczny będzie miał 100% flex-basis

2. drugim a trzecie przedmioty będą h ave autoflex-basis

To sprawi, 2 i 3 są w tej samej linii - zobacz demo poniżej:

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>