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

Quiero eliminar toda sangría de ul. He intentado establecer margin, padding, text-indenta 0, pero sin éxito. Parece que el ajuste text-indenta un número negativo es el truco, pero ¿esa es realmente la única forma de eliminar la sangría?

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

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

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

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

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

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

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

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

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

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>

Esta solución no solo es liviana, sino que tiene múltiples ventajas:

• Alinea 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 correctamente sangrados si se envuelven en varias líneas.

Información heredada:
para las versiones de IE 8 y posteriores, debe usar margen izquierdo en su lugar:

    ul { margin-left: 1.2em; }

Agregue esto a su CSS:

ul { list-style-position: inside; }

Esto colocará los elementos li en la misma sangría que otros párrafos y texto.

Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp

display:table-row; también eliminará la sangría pero eliminará las balas.

Retire el relleno:

padding-left: 0;

¿Puedes proporcionar un enlace? gracias puedo echar un vistazo Lo más probable es que su selector CSS no sea lo suficientemente fuerte o puede intentar

padding:0!important;

Tengo el mismo problema con un pie de página que estoy tratando de dividir. Descubrí que esto funcionó para mí al probar algunas de las sugerencias anteriores combinadas:

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

Esto parece mantenerlo a la izquierda debajo de mi h1 y las viñetas dentro del div en lugar de afuera a la izquierda.

Demostración en vivo: https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

Como la pregunta original no está clara acerca de sus requisitos, intenté resolver este problema dentro de las pautas establecidas por otras respuestas. En particular:

• Alinear viñetas de lista con texto de párrafo externo
• Alinee varias líneas dentro del mismo elemento de la lista.

También quería una solución que no dependiera de que los navegadores acordaran cuánto relleno usar. He agregado una lista ordenada para completar.

Al hacer esto en línea, establecí el margen en 0 (ul style = "margin: -0px"). Las balas se alinean con el párrafo sin saliente.