listas - ¿Cómo hacer que una lista de viñetas se alinee con el texto en css?
listas de definicion html (4)
La imagen demuestra el problema. Quiero que la lista de viñetas se alinee con el texto, no con sangría.
Esto debe ser modificado 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 la izquierda en esta lista de toros? Intenté margin: 0; padding: 0; margin: 0; padding: 0; no funciono
Aplicar relleno-izquierda: 0 y cambiar la posición del estilo de lista al interior
ul {
padding-left:0;
}
ul li {
list-style-position:inside
}
Ejemplo de enlace http://jsfiddle.net/vF5HF/
Como mencionó @NicolaPasqui, para su problema debe usar:
ul {
padding-left: 0
}
ul li {
list-style-position: inside;
}
Al configurar la posición de estilo de lista en el interior , la viñeta estará dentro del elemento de la lista .
A diferencia de configurarlo en el exterior , donde la viñeta estará fuera del elemento de la lista .
Hay un gran artículo sobre el estilo de bala que creo que podría beneficiarse here .
<!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 😈</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>
ul {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 1em;
}