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

ul html

Question

Quiero eliminar toda sangría de ul . Intenté establecer el margin , el padding , text-indent en 0 , pero no sirvió de nada. Parece que establecer text-indent en un número negativo hace el truco, pero ¿es esa realmente la única forma de eliminar la sangría?

Answer 1

¿Puede proporcionar un enlace? gracias Puedo echar un vistazo Lo más probable es que su selector css no sea lo suficientemente fuerte o puede intentarlo

padding:0!important;

Answer 2

Agrega esto a tu 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

Answer 3

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 exterior
• Alinear múltiples líneas dentro del mismo elemento de lista

También quería una solución que no dependiera de que los navegadores estuvieran de acuerdo con la cantidad de relleno que usarían. He añadido una lista ordenada para la integridad.

Answer 4

Establecer el estilo de la lista y el relleno izquierdo a nada.

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

Ejemplo de jsFiddle

Para mantener las viñetas, puede reemplazar el list-style: none con list-style-position: inside o el list-style: inside abreviado list-style: inside :

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

Ejemplo de jsFiddle

Answer 5

Mi solución preferida para eliminar la sangría <ul> es un simple 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>

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

• Bien alinea a la izquierda los puntos de bala de <ul> con el texto del párrafo normal (= sangrado de <ul> eliminado).
• Los bloques de texto dentro de los elementos <li> permanecen correctamente sangrados si se envuelven en varias líneas.

Información legada:
Para las versiones 8 y posteriores de IE, debe usar el margen izquierdo en su lugar:

 ul { margin-left: 1.2em; }

Answer 6

Retire el relleno:

padding-left: 0;

Answer 7

Tengo el mismo problema con un pie de página que estoy tratando de dividir. Encontré 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 los puntos de bala dentro de la div en lugar de afuera a la izquierda.

Answer 8

display:table-row; También se librará de la muesca, pero eliminará las balas.