Sắp xếp văn bản của một mục danh sách không theo thứ tự

Question

Tôi tự hỏi liệu có cách nào để làm cho văn bản của một mục danh sách không thứ tự xuất hiện dưới dạng cột "" bên cạnh biểu tượng mục danh sách đĩa/chấm tiêu chuẩn không? Made một cặp ảnh chụp màn hình:

Đây là cách có vẻ khi sử dụng một danh sách có thứ tự tiêu chuẩn với một số văn bản bên trong mục danh sách (li):

Và đây là cách tôi muốn nó trông :

Điều này có thể không có bất kỳ hình ảnh/div hack nào không? ;-) Tôi đã tìm kiếm xung quanh để xem liệu có bất kỳ cài đặt CSS chuẩn nào cho nó hay không, nhưng tôi dường như không tìm thấy bất kỳ cài đặt nào.

Cảm ơn rất nhiều trước!

All the best,

Bo

Answer 1

Bạn chỉ có thể mã hóa nó như thế này:

HTML

<ul> 
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    </ul> 

CSS

ul{ 
    margin:0; 
    padding:0 20px; 
} 
ul li { 
    padding:0; 
    width:150px; 
    background:red; 
    margin:10px 0; 
} 

Answer 2

Thêm này

ul { 
    display:inline-block; 
} 

mã css của bạn.

Answer 3

Tôi nghĩ rằng mục danh sách nổi sang bên trái là giải pháp tốt nhất để thực hiện chúng xuất hiện dưới dạng cột.

mã CSS này có thể giúp bạn:

<style type="text/css"> 
    ul > li { 
     margin: 0 10px; 
     width: 150px; 
     float: left; 
    } 
</style> 

Answer 4

list-style-position là tài sản mà bạn đang tìm kiếm. Nó hoạt động trong tất cả các trình duyệt. (xem MDN để biết thêm chi tiết)

ul { 
    list-style-position: outside; 
    /* You may want to add an additional padding-left: */ 
    padding-left: 1.5em; 
} 

Nhưng thực tế là outside là giá trị mặc định. Bạn có thể ghi đè lên nó ở một nơi khác.

Answer 5

Nó chỉ là đủ để sử dụng vòm văn bản với mở (<li>) và đóng (</li >) thẻ dưới <ul> thẻ.

Ví dụ,

<ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> 
    <li>This is list item - 2</li> 
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li> 
    <li>This is list item - 4</li> 
</ul> 

Output sẽ được,

• Lorem ipsum dolor sit Amet, consectetur adipiscing elit, sed làm eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud tập thể dục ullamco laboris nisi ut aliquip ex ea commodo hậu quả.
• Đây là mục danh sách - 2
• Duis aute irure dolor trong reprehenderit trong voluptate velit esse cillum dolore eu fugiat nulla pariatur. sint Excepteur occaecat cupidatat phi proident, sunt trong culpa qui officia deserunt mollit anim id est laborum
• Đây là danh sách mục - 4