Segunda línea en li comienza debajo de la viñeta después de restablecer CSS

Question

Tengo algunos problemas con mi ul -list después de usar la aplicación de restablecimiento de CSS.

Cuando el texto en el li es largo y se rompe en una segunda línea, el texto comienza debajo de la viñeta. Me gustaría que comience con el mismo margen/relleno que el texto en el lado derecho de la viñeta.

Algo difícil de explicar, pero si miras la imagen de ejemplo. La imagen de la izquierda es la lista de hoy. "motta varsel [...]" comienza bajo la viñeta, pero me gustaría que se vea en la imagen de la derecha.

¿Cómo puedo hacer esto con CSS? Supongo que hay algo muy simple que he pasado por alto, pero no puedo entender qué. Las búsquedas de Google tampoco arrojaron nada útil.

Answer 1

La etiqueta li tiene una propiedad llamada list-style-position. Esto hace que tus balas estén dentro o fuera de la lista. En forma predeterminada, está configurado en inside. Eso hace que su texto lo envuelva. Si lo configura en outside, el texto de sus etiquetas li se alineará.

El inconveniente de eso es que sus viñetas no se alinearán con el texto fuera del ul. Si desea alinearlo con el otro texto, puede usar un margen.

ul li { 
    /* 
    * We want the bullets outside of the list, 
    * so the text is aligned. Now the actual bullet 
    * is outside of the list’s container 
    */ 
    list-style-position: outside; 

    /* 
    * Because the bullet is outside of the list’s 
    * container, indent the list entirely 
    */ 
    margin-left: 1em; 
} 

---

Editar décima quinta de de marzo de, 2014 Al ver la gente sigue llegando de Google, me sentí como la respuesta original podría mejorar

• cambiado el bloque de código para proporcionar solo la solución
• Cambió la unidad de sangría a em
• Cada propiedad se aplica al elemento ul
• buenos comentarios :)

Answer 2

Aquí es un buen example -

ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
    padding: 10px 0 10px 20px; 
    text-indent: -1em; 
} 

Demostración de Trabajo: http://jsfiddle.net/d9VNk/

Answer 3

Me segunda respuesta Dipaks', pero a menudo sólo el texto-guión es suficiente, ya que puede/maynot estar posicionando la UL para un mejor diseño controlar.

ul li{ 
text-indent: -1em; 
}