html - attribute - La segunda línea en li comienza debajo de la viñeta después del restablecimiento de CSS

p html

Question

Estoy teniendo algunos problemas con mi lista de ul después de usar la aplicación CSS-reset.

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

Algo difícil de explicar, pero si nos fijamos en la imagen de ejemplo. La imagen de la izquierda es la lista de hoy. "motta varsel [...]" comienza debajo de la bala, pero me gustaría que viera 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 en Google tampoco devolvieron nada útil.

Answer 1

Aquí hay 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 2

La etiqueta li tiene una propiedad llamada list-style-position . Esto hace que sus balas dentro o fuera de la lista. Por defecto, se establece en el inside . Eso hace que su texto lo envuelva. Si lo configura en el outside , el texto de sus etiquetas li se alineará.

La desventaja de esto es que sus balas no se alinearán con el texto fuera de la ul . Si desea alinearlo con el otro texto, puede utilizar 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;
}

Edición 15 de marzo de 2014 Al ver que la gente aún viene de Google, sentí que la respuesta original podría mejorar.

• Se modificó el bloque de código para proporcionar solo la solución.
• Cambió la unidad de sangrado a em ''s
• Cada propiedad se aplica al elemento ul
• Buenos comentarios :)

Answer 3

Respaldo la respuesta de los Dipaks, pero a menudo solo la sangría del texto es suficiente, ya que puede / no estar posicionando la ul para un mejor control de diseño.

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