¿Cómo eliminar la sangría de un elemento de lista desordenado?

Quiero eliminar todas las sangrías de ul. Intenté configurar margin, padding, text-indenten 0, pero fue en vano. Parece que establecer text-indentun número negativo funciona, pero ¿es realmente la única forma de eliminar la sangría?

Dec 19 '12 01:12 antonpug

Establezca el estilo de la lista y el relleno izquierdo en nada.

ul {
    list-style: none;
    padding-left: 0;
}

Mostrar fragmento de código

ul {
  list-style: none;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Expand snippet

Para mantener las viñetas puedes reemplazar list-style: nonecon list-style-position: insideo la taquigrafía list-style: inside:

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

Mostrar fragmento de código

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Expand snippet

Dec 18 '2012 18:12 j08691

Mi solución preferida para eliminar la sangría <ul> es una simple frase CSS de una sola línea:

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

Expandir fragmento

Esta solución no sólo es ligera, sino que tiene múltiples ventajas:

Alinea muy bien a la izquierda las viñetas de <ul> con el texto del párrafo normal circundante (= se elimina la sangría de <ul>).
Los bloques de texto dentro de los elementos <li> permanecen con la sangría correcta si se dividen en varias líneas.

Información heredada:
para las versiones 8 y anteriores de IE, debes usar el margen izquierdo en su lugar:

    ul { margin-left: 1.2em; }

Oct 06 '2014 09:10 Jpsy