¿Cómo hacer que una lista de viñetas se alinee con el texto en css?

enter image description here ¿Cómo hacer que una lista de viñetas se alinee con el texto en css?

La imagen demuestra el problema. Quiero que la lista de viñetas se alinee con el texto, sin sangría.

Esto se debe modificar en css supongo, porque la fuente es:

  <p>This is a test :)</p> 

<ul> 

<li>Test1</li> 

<li>Test2</li> 

<li>Test3</li> 

<li>Test4</li> 

</ul> 

<p><strong>Bla bla</strong></p> 

<p><strong>Dette er en test</strong></p> 

<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p> 

<p><strong>Dette er en test</strong></p> 

<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p> 
     </div>

Entonces, ¿cómo puedo eliminar el relleno/margen de izquierda en esta lista toro? Probé margin: 0; padding: 0; no funcionó

Fuente

2011-09-22 Karem

Aplicar padding-left: 0 y cambiar la posición de la lista de estilo para el interior

ul { 
padding-left:0; 
} 
ul li { 
list-style-position:inside 
}

Ejemplo enlace http://jsfiddle.net/vF5HF/

Fuente

2011-09-22 14:10:48 NicolaPasqui

Tenga en cuenta que 'list-style-position: inside' hará que la viñeta quede básicamente en el texto, de modo que si el texto se ajusta, la viñeta no se separará del texto. Se ve bastante mal si me preguntas. – Gavin

Está pidiendo una lista sin texto, alineada con el texto ... se ve bastante mal, pero eso es lo que está buscando;) – NicolaPasqui

ul { 
    margin-left: 0; 
    padding-left: 0; 
} 
li { 
    margin-left: 1em; 
}

Fuente

2011-09-22 14:06:55

Esta respuesta suele ser mejor ya que mantiene el texto en un elemento de la lista que abarca varias líneas alineadas. –

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Bullet alignment</title> 
    <style type="text/css"> 
     body { font-size: 14pt; margin: 100px; background-color: #f2f2f2; } 
     ul { margin-left: 0; padding-left: 2em; list-style-type: none; } 
     li:before { 
      content: "\2713"; 
      text-align: left; 
      display: inline-block; 
      padding: 0; 
      margin: 0 0 0 -2em; 
      width: 2em; 
     } 
    </style> 
</head> 
<body> 
<p>Bullet alignment &#x1F608;</p> 
<ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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>Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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> 
</ul> 
<p>That’s all Folks</p> 
</body>

Fuente

2014-01-24 17:38:32 nico

Esta es la mejor respuesta aquí. El único cambio que haría sería usar contenido: "\ 2022" con font-weight: negrita ya que el OP solicitó viñetas. –

¿Cómo hacer que una lista de viñetas se alinee con el texto en css?

Respuesta

Cuestiones relacionadas