Textausrichtung eines ungeordneten Listenelements

Question

Ich frage mich, ob es eine Möglichkeit gibt, den Text eines ungeordneten Listenelements als eine "Spalte" neben dem Standard-Disc/Punktlisten-Elementsymbol erscheinen zu lassen? Aus ein paar Screenshots:

Dies ist, wie es aussieht, wenn ein Standard-ungeordnete Liste mit Text innerhalb des Listenelement (li) mit:

Und das ist, wie ich es aussehen soll :

dies möglich ist, ohne Bild/div Hacks? ;-) Ich habe herumgesucht, um zu sehen, ob es eine Standard-CSS-Einstellung dafür gibt, aber ich konnte keine finden.

Vielen Dank im Voraus!

Alles Gute,

Bo

Answer 1

Sie können einfach es wie folgt Code:

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

Dieses

ul { 
    display:inline-block; 
} 

zu Ihrem CSS-Code.

Answer 3

Ich denke, schwebende Listenelemente auf der linken Seite ist die beste Lösung zu machen Sie erscheinen als Spalten. Diese CSS-Code Sie können

helfen:

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

Answer 4

list-style-position ist die Eigenschaft, die Sie suchen. Es funktioniert in allen Browsern. (Siehe MDN für weitere Details)

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

Aber eigentlich outside es ist der Standardwert. Sie überschreiben es wahrscheinlich woanders.

Answer 5

Es ist gerade genug, um Text-Surround mit offen (<li>) und geschlossen (</li >) Tags unter <ul> Tag zu verwenden.

Zum Beispiel

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

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tun eiusmod tempor incididunt ut labore et dolore magna aliqua. En en en ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul
• Dies ist der Listeneintrag - 2
• Duis anure irre dolor in represenderit in voluptate velit esse cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in est anim id officia deserunt culpa qui mollit laborum
• Dies ist Artikelliste - 4