Sırasız liste öğesinin metin hizalaması

Question

Standart disk/nokta listesi öğesi simgesinin yanında, sırasız bir liste öğesinin metninin "sütun" olarak görünmesini sağlamanın bir yolu olup olmadığını merak ediyorum. Bunun nasıl görünmesini istediğiniz

Ve şudur: ekran görüntüleri yapılmış bir çift:

Bu liste öğesi içindeki bazı metni (li) ile standart bir sırasız liste kullanırken nasıl görünüyor :

herhangi bir görüntü/div hacks bu mümkün mü? ;-) Bunun için herhangi bir standart CSS ayarı olup olmadığını görmek için arandım, ama bulamadım.

Çok önceden teşekkürler!

Tüm iyi,

Bo

Answer 1

Sadece şöyle kodlayabiliriz:

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

sizin css koduna bu

ul { 
    display:inline-block; 
} 

ekleyin.

Answer 3

Ben sola liste öğelerini yüzen düşündürmek için en iyi çözümdür sütun olarak görünürler.

Bu CSS kodunu size yardımcı olabilir:

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

Answer 4

list-style-position Aradığınız özelliktir. Tüm tarayıcılarda çalışır. (Daha fazla bilgi için MDN bakınız)

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

Ama aslında outside varsayılan değerdir. Muhtemelen başka bir yere yazıyorsun.

Answer 5

Sadece yeterince <ul> etiketi altında açık (<li>) ve kapalı (</li >) metni etiketlerinin kullanmaktır. Örneğin

,

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

Çıktı olacak

• Lorem ipsum dolor yapmak sed, consectetur adipiscing elit, sit amet eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ad minim veniam, en iyi alışkanlıktan kurtulma emrini uyandırmak.
• Bu liste - 2
• Duis aute irure dolor, voluptate velit özeti ve diğer ülkelerdeki fuarı null pariatur. occaecat Excepteur Sint cupidatat olmayan proident, culpa qui officia deserunt mollit anim id est içinde sunt Bu liste öğesi
• olduğunu laborum - 4