Alineación de texto de un elemento de la lista desordenada

Question

Me pregunto si hay alguna forma de hacer que el texto de un elemento de la lista no ordenada aparezca como una "columna" al lado del ícono de elemento estándar de la lista de disco/punto? Hizo un par de capturas de pantalla:

Esto es cómo se ve cuando se utiliza una lista desordenada de serie con un texto en el interior del elemento de la lista (li):

Y así es como yo quiero que se vea :

Es esto posible sin ningún tipo de hacks imagen/div? ;-) He buscado para ver si hay alguna configuración de CSS estándar, pero parece que no puedo encontrar ninguna.

¡Muchas gracias de antemano!

Todo lo mejor,

Bo

Answer 1

Simplemente puede codificar así:

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

Añadir esta

ul { 
    display:inline-block; 
} 

a su código CSS.

Answer 3

Creo elementos de la lista flotante a la izquierda es la mejor solución para hacer ellos aparecen como columnas.

Este código CSS puede ayudarle a:

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

Answer 4

list-style-position es la propiedad que está buscando. Funciona en todos los navegadores. (Ver MDN para más detalles)

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

Pero en realidad outside es el valor predeterminado. Probablemente lo sobrescribas en otro lugar.

Answer 5

Es justo lo suficiente para usar envolvente texto con abierta (<li>) y cerrado (</li >) etiquetas bajo <ul> etiqueta.

Por ejemplo,

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

de salida será,

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed hacer 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.
• Este es el elemento de la lista - 2
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. sint Excepteur occaecat cupidatat no proident, sunt qui est en culpa officia deserunt mollit anim Identificación Laborum
• Este es elemento de la lista - 4