CSS Belirli satırlardaki belirli madde işaretlerini gösterme

Question

Aşağıdaki örnekte, 2 ve 3 numaralı öğelerin yan yana görünmesini ve diğerlerinin de yığınlanmamış sırasız liste olarak kalmasını istiyorum. Bunu css'de nasıl yapabilirim?

bu kod

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

aşağıda böyle gösterir.

textone

texttwo

textthree

textfour

Ama aşağıda bu görüntü olarak şunu göstermek istiyorum. Bunu CSS'de nasıl yapabilirim?

Answer 1

Basit şamandıra ve bunu yapmak gereken bir marj. flexbox bir seçenek ise

.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

, kullanabileceğiniz bir sarmaflexbox:

1. Her esnek madde% 100 flex-basis

2. ikinci olacak ve üçüncü öğeler h Bu 2 ve 3 aynı çizgide gelip yapacakflex-basis

oto ave - demo aşağıya bakınız:

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>