Tạo kiểu CSS cách hiển thị các dấu đầu dòng cụ thể trong một dòng

Question

Trong ví dụ sau, tôi muốn các mục 2 và 3 xuất hiện cạnh nhau và phần còn lại sẽ giữ nguyên dưới dạng một danh sách thứ tự xếp chồng lên nhau. Làm thế nào để làm điều này trong 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>

mã này cho thấy như thế này dưới đây.

textone

texttwo

textthree

textfour

Nhưng tôi muốn thể hiện điều này như hình ảnh dưới đây. Làm thế nào để làm điều này trong CSS?

Answer 1

Phao đơn giản và lề cần làm.

.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

Nếu flexbox là một lựa chọn, bạn có thể sử dụng một góiflexbox:

1. Mỗi mục flex sẽ có 100% flex-basis

2. Thứ hai và thứ ba sẽ h ave autoflex-basis

này sẽ làm cho 2 và 3 phải vào thế cùng một dòng - xem bản demo dưới đây:

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>