style - sangria en listas html
¿Cómo mantener la sangría para la segunda línea en listas ordenadas a través de CSS? (14)
Actualizar
Esta respuesta está desactualizada. Puede hacer esto mucho más simple, ya que me sorprendió ver que esto aún no se ha resuelto. Puede utilizar el algoritmo de diseño de tablas del navegador (sin usar tablas) de la siguiente manera:
ul {
list-style-position: outside;
}
Ver https://www.w3schools.com/cssref/pr_list-style-position.asp
Respuesta original
ol {
counter-reset: foo;
display: table;
}
ol > li {
counter-increment: foo;
display: table-row;
}
ol > li::before {
content: counter(foo) ".";
display: table-cell; /* aha! */
text-align: right;
}
Demostración: http://jsfiddle.net/4rnNK/1/
Para que funcione en IE8, use el legado :before notación con dos puntos.
Quiero tener una lista "interna" con viñetas de lista o números decimales que estén al mismo nivel que los bloques de texto superiores. ¡Las segundas líneas de las entradas de la lista deben tener la misma sangría que la primera fila!
P.ej:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis,
1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
CSS proporciona solo dos valores para su "posición de estilo de lista": interior y exterior. Con "adentro", las segundas líneas están alineadas con los puntos de la lista, no con la línea superior:
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
El ancho "fuera" de mi lista ya no está a la altura de los bloques de texto superiores.
Los experimentos amplían la sangría de texto, el relleno izquierdo y el margen izquierdo para las listas desordenadas, pero fallan en las listas ordenadas porque depende del número de caracteres de la lista decimal.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
11. Text
12. Text
"11". y "12". no están al ras con el bloque de texto superior en comparación con "3". y "4".
Entonces, ¿dónde está el secreto sobre las listas ordenadas y la sangría de la segunda línea? ¡Gracias por tu esfuerzo!
Compruebe este violín:
Muestra cómo sangrar manualmente ul y ol usando CSS.
HTML
<head>
<title>Lines</title>
</head>
<body>
<ol type="1" style="list-style-position:inside;">
<li>Text</li>
<li>Text</li>
<li >longer Text, longer Text, longer Text, longer Text second line of longer Text </li>
</ol>
<br/>
<ul>
<li>Text</li>
<li>Text</li>
<li>longer Text, longer Text, longer Text, longer Text second line of longer Text </li>
</ul>
</body>
CSS
ol
{
margin:0px;
padding-left:15px;
}
ol li
{
margin: 0px;
padding: 0px;
text-indent: -1em;
margin-left: 1em;
}
ul
{
margin:0;
padding-left:30px;
}
ul li
{
margin: 0px;
padding: 0px;
text-indent: 0.5em;
margin-left: -0.5em;
}
También edité tu violín.
Toma nota de ello.
Creo que esto va a hacer lo que usted está buscando.
.cssClass li {
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
padding-left: 1em;
}
JSFiddle: https://jsfiddle.net/dzbos70f/
Creo que solo necesitas poner la lista ''viñeta'' fuera del relleno.
li {
list-style-position: outside;
padding-left: 1em;
}
El siguiente CSS hizo el truco:
ul{
margin-left: 1em;
}
li{
list-style-position: outside;
padding-left: 0.5em;
}
La forma más fácil y limpia, sin hacks, es simplemente sangrar la ul (u ol ), así:
ol {
padding-left: 40px;
list-style-position: outside;
}
Esto da el mismo resultado que la respuesta aceptada: https://jsfiddle.net/af2fqryz/
Captura de pantalla:
Las listas ol, ul funcionarán si lo desea, también puede usar una tabla con borde: ninguna en el css.
Mi solución es muy similar a la de Pumbaa80 , pero sugiero usar display: table lugar de display:table-row para el elemento li . Así será algo así:
ol {
counter-reset: foo; /* default display:list-item */
}
ol > li {
counter-increment: foo;
display: table; /* instead of table-row */
}
ol > li::before {
content: counter(foo) ".";
display: table-cell;
text-align: right;
}
Así que ahora podemos usar márgenes para espaciar entre li ''s
Ok, he vuelto y he resuelto algunas cosas. Esta es una SOLUCIÓN RÁPIDA a lo que estaba proponiendo, pero parece ser funcional.
Primero, hice de los números una serie de listas desordenadas. Una lista desordenada normalmente tendrá un disco al principio de cada elemento de la lista (
Entonces, hice la visualización de la lista completa: tabla-fila. Aquí, ¿por qué no te pego el código en lugar de hablar de ello?
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div><ul>
<li>1.</li>
<li><p>2.</p></li>
<li>10.</li>
<li><p>110.</p></li>
<li>1000.</li>
</ul>
</div>
<div>
<p>Some author</p>
<p>Another author</p>
<p>Author #10</p>
<p>Author #110</p>
<p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
</div>
</body>
</html>''
CSS:
ul li{
list-style: none;
display: table-row;
text-align: right;
}
div {
float: left;
display: inline-block;
margin: 0.2em;
}
Esto parece alinear el texto en el segundo div con los números en la lista ordenada en el primer div. He rodeado la lista y el texto con una etiqueta para poder decirles a todos los divs que se muestren como bloques en línea. Esto los alineaba muy bien.
El margen está ahí para poner un espacio entre el período y el inicio del texto. De lo contrario, corren uno contra el otro y parece una monstruosidad.
Mi empleador quería texto completo (para entradas bibliográficas más largas) para alinearse con el inicio de la primera línea, no con el margen izquierdo. Originalmente me movía con un margen positivo y una sangría de texto negativa, pero luego me di cuenta de que cuando cambiaba a dos divs diferentes, esto tenía el efecto de hacerlo de modo que todo el texto se alineara porque el margen izquierdo del div Fue el margen donde el texto comenzó naturalmente. Por lo tanto, todo lo que necesitaba era un margen de 0.2em para agregar algo de espacio, y todo lo demás se alineaba perfectamente.
Espero que esto ayude si OP tenía un problema similar ... Me costó entenderlo.
Puede establecer el margen y el relleno de un ol o ul en CSS
ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
Puedes usar CSS para seleccionar un rango; en este caso, desea elementos de la lista 1-9:
ol li:nth-child(n+1):nth-child(-n+9)
A continuación, ajustar los márgenes en los primeros artículos adecuadamente:
ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }
Véalo en acción aquí: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
Tuve este mismo problema y comencé a usar la respuesta de user123444555621 . Sin embargo, también necesitaba agregar padding y un border a cada li , lo que esa solución no permite porque cada li es una table-row .
Primero, usamos un counter para replicar los números del ol .
Luego configuramos display: table; en cada li y display: table-cell en el :before para darnos la sangría.
Por último, la parte difícil. Como no estamos utilizando un diseño de tabla para todo el conjunto, debemos asegurarnos de que :before es el mismo ancho. Podemos usar la unidad ch para mantener aproximadamente el ancho igual al número de caracteres. Para mantener los anchos uniformes cuando difieren el número de dígitos para :before ''s, podemos implementar consultas de cantidad . Suponiendo que sepa que sus listas no serán de 100 artículos o más, solo necesita una regla de consulta de cantidad para indicar :before de cambiar su ancho, pero puede agregar más fácilmente.
ol {
counter-reset: ol-num;
margin: 0;
padding: 0;
}
ol li {
counter-increment: ol-num;
display: table;
padding: 0.2em 0.4em;
border-bottom: solid 1px gray;
}
ol li:before {
content: counter(ol-num) ".";
display: table-cell;
width: 2ch; /* approximately two characters wide */
padding-right: 0.4em;
text-align: right;
}
/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
width: 3ch;
}
/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
width: 4ch;
}
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
Yo también me gusta mucho esta solución:
ul {
list-style-position: inside;
list-style-type: disc;
font-size: 12px;
line-height: 1.4em;
padding: 0 1em;
}
ul li {
margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-indent: -2em;
}
CSS proporciona solo dos valores para su "posición de estilo de lista": interior y exterior. Con "adentro", las segundas líneas están alineadas con los puntos de la lista, no con la línea superior:
En las listas ordenadas, sin intervención, si le asigna a "lista-estilo-posición" el valor "dentro", la segunda línea de un elemento de la lista larga no tendrá sangría, sino que volverá al borde izquierdo de la lista (es decir, se alineará a la izquierda con el número del artículo). Esto es peculiar a las listas ordenadas y no sucede en listas desordenadas.
Si, en cambio, le da a "lista-estilo-posición" el valor "fuera", la segunda línea tendrá la misma sangría que la primera línea.
Tenía una lista con un borde y tenía este problema. Con "list-style-position" establecido en "inside", mi lista no parecía que yo quisiera. Pero con "list-style-position" establecido en "outside", los números de los elementos de la lista quedaron fuera de la caja.
Resolví esto simplemente estableciendo un margen izquierdo más ancho para toda la lista, que empujó toda la lista hacia la derecha, de nuevo a la posición en la que estaba antes.
CSS:
ol.classname {margin: 0; padding: 0;}
ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}
HTML:
<ol class="classname" style="margin:0 0 0 1.5em;">