¿Cómo mantener la sangría para la segunda línea en listas ordenadas a través de CSS?

Quiero tener una lista "interna" con viñetas de lista o números decimales alineados con 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": dentro y fuera. Con "dentro", las segundas líneas están al ras 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á alineado con bloques de texto superiores.

Los experimentos de ancho de sangría de texto, relleno a la izquierda y margen a la izquierda funcionan para listas desordenadas, pero fallan para listas ordenadas porque depende de la cantidad 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 alineados con el bloque de texto superior en comparación con "3". y "4.".

Entonces, ¿dónde está el secreto de las listas ordenadas y la sangría de la segunda línea? ¡Gracias por tu esfuerzo!

preguntado el 03 de mayo de 12 a las 10:05

Usuario pali madra agregó esto como respuesta, pero se eliminó por no contener más explicaciones. Dijo que jsfiddle puede ser lo que estás buscando: jsfiddle.net/palimadra/CZuXY/1 -

Intente configurar padding-left only... -

En caso de que alguien se tope con esta pregunta, que solo está buscando "sangría de lista básica", eche un vistazo a esta pregunta (stackoverflow.com/questions/17556496/…) y responde Natasha Banegas. -

Ni una sola respuesta aborda la pregunta real. La pregunta real es cómo alinear a la izquierda los dígitos en la lista, mientras que el texto del elemento de la lista se alinea a la izquierda por separado con el texto del elemento que se encuentra arriba cuando ese texto se desborda a una segunda línea o subsiguiente. De forma predeterminada, y en casi todas las respuestas, los dígitos de la lista están alineados a la derecha y el texto de los elementos de la lista está alineado a la izquierda. -

14 Respuestas

Noticias

Esta respuesta está desactualizada. Puede hacer esto de manera mucho más simple, como se señala en otra respuesta a continuación:

ul {
  list-style-position: outside;
}

Ven https://www.w3schools.com/cssref/pr_list-style-position.asp

Respuesta original

Me sorprende ver que esto aún no se ha resuelto. Puede hacer uso del algoritmo de diseño de tablas del navegador (sin usar tablas) de esta manera:

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/

enter image description here

Para que funcione en IE8, use el legado :before notación con dos puntos.

contestado el 10 de mayo de 20 a las 20:05

También puede evitar las cosas de la mesa torcida usando position: relative al <li>y position: absolute sobre el contenido generado. Ver jsfiddle.net/maryisdead/kgr4k para un ejemplo. - maria muerta

@maryisdead ¿Por qué? 40px? Eso se romperá cuando los contadores sean más anchos que eso.. El objetivo de usar el diseño de la tabla es que el navegador se ajustará automáticamente al contenido. - user123444555621

Bien, pero ¿cómo se controla? ¿margen inferior? la altura de la está determinada únicamente por la altura de los elementos de celda de tabla en él. Por lo tanto, el margen, el relleno y la altura de esos elementos no tienen efecto. ¿Cómo evitar esta limitación? - hschmieder

Si tiene elementos de lista de varias líneas y necesita un espacio vertical consistente, la solución es agregar un espacio de borde vertical al selector ol, por ejemplo, espacio entre bordes: 0 3px; El relleno normal en la celda de la tabla no funciona porque el número siempre es solo una línea. - RemBem

esto es muy malo... el margen después de que LI no funcione - básicamente estropeamos el modo de 'visualización' de li y ya no es un elemento válido para agarrar la línea. Debe arreglar esto de acuerdo con la respuesta de @ChuckLeButt: sagivo

Creo que esto hará lo que estás buscando.

.cssClass li {
  list-style-type: disc;
  list-style-position: inside;
  text-indent: -1em;
  padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

enter image description here

Respondido 20 ago 21, 11:08

mejor si también agrega padding-left: 1em; - Bence Gacsályi

Esta es, con mucho, la mejor respuesta de todas las soluciones en esta página. Es mucho más conveniente que otros. Si está dudando sobre qué respuesta elegir, elija esta. - Valentin Mercier

@loremmonkey Esto es rápido y sucio, pero no es una solución real. Primero, 1em no es igual al espacio de la sangría. Las líneas no se alinearán perfectamente en píxeles. Segundo, ¿qué pasa cuando la lista llega al número 10? 100? La sangría de texto no funcionará, no se alineará. Esta respuesta debe ser votada negativamente. - Soleada

@Sunny Es una lista de discos, no numerada, entonces, ¿por qué contar hasta 100? No veo ningún problema con mis listas usando el código anterior. - mono lorem

@loremmonkey La sangría no es 1em. oi60.tinypic.com/a0eyvs.jpg El primer elemento de la lista utiliza la técnica de sangría de texto anterior. En comparación con el aspecto que normalmente tiene con la posición de estilo de lista: afuera está desalineado, en este caso con un píxel fuera de lugar. - Soleada

La forma más fácil y limpia, sin trucos, es solo sangrar el ul (o ol), al igual que:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
}

Esto da el mismo resultado que la respuesta aceptada: https://jsfiddle.net/5wxf2ayu/

Captura de pantalla:

enter image description here

Respondido 20 ago 21, 11:08

Es posible que deba presentar una solicitud list-style-position: outside a <li>. - Alex

@Alex Solo debería necesitar hacer esto si está forzando la sobrescritura de un estilo existente (developer.mozilla.org/en/docs/Web/CSS/list-style-position). - Chuck Le Butt

Mira este violín:

http://jsfiddle.net/K6bLp/

Muestra cómo sangrar manualmente ul y ol usando CSS.

HTML

<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>
</html>

CO

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:

http://jsfiddle.net/j7MEd/3/

Tome nota de ello.

Respondido 20 ago 21, 11:08

gracias, funciona muy bien para UL y para OL hasta 9 entradas de lista. Este es el problema principal que describí en mi pregunta sobre el 11/12. En mi ejemplo anterior, ejecuto otra técnica para que el problema se vea diferente pero el núcleo del problema sigue siendo el mismo: hay una diferencia si mi punto de lista decimal tiene uno o dos o más números, por ejemplo, 1, 11 o 111.! No veo ningún punto en el que pueda reaccionar a través de CSS y ajustar la sangría de texto y el margen izquierdo a la cantidad de números. - kernfrucht

Para la sangría de la segunda línea de ol (más de un dígito), creo que CSS no lo resolverá. Solo deberíamos optar por jquery. - Deepan Babu

Observe también que el type atributo para <ol> parece estar en desuso en HTML 5. Use style="list-style-type: " en lugar de. - AJ.

¿21 de ustedes son serios? esto no funciona. No estoy seguro si cambiaste tu código desde que lo publicaste. - jgallardo

Puede establecer el margen y el relleno de un ol or ul en CSS:

ol {
  margin-left: 0;
  padding-left: 3em;
  list-style-position: outside;
}

Respondido 20 ago 21, 11:08

desafortunadamente, el problema no se resuelve con esta solución: las segundas líneas están al ras con los puntos de la lista, no a lo ancho de la fila superior, vea el ejemplo anterior: kernfrucht

11 y 12 en jsfiddle.net/j7MEd/1 alinearse con los párrafos superior e inferior y no cambié el código. ¿Me estoy perdiendo de algo? - luke2012

no, ese no es el punto. El principal problema es que la segunda (y tercera, etc...) línea de cada punto de la lista no tiene la misma "sangría" que la primera línea. (ver jsfiddle-ejemplo). En mi pregunta anterior, pienso en una solución alternativa con relleno, margen, etc., pero solo funciona para listas NO ordenadas. En la lista ordenada ocurren nuevos problemas como este 11/12. Entonces, mi pregunta principal es: ¿Cómo puedo hacer la sangría (como presento en mi primer ejemplo de mi pregunta) para listas ordenadas sin tener problemas como el 11/12? - kernfrucht

Ok lo siento te tengo! Esta es una forma ... el único problema es lograr un navegador cruzado, deberá establecer el margen en IE y el relleno en Firefox. jsfiddle.net/j7MEd/2 - luke2012

El siguiente CSS hizo el truco:

ul {
  margin-left: 1em;
}
    
li {
  list-style-position: outside;
  padding-left: 0.5em;
}

Respondido 20 ago 21, 11:08

Puede usar CSS para seleccionar un rango; en este caso, desea enumerar los elementos del 1 al 9:

ol li:nth-child(n+1):nth-child(-n+9) 

Luego, ajuste los márgenes en esos primeros elementos de manera adecuada:

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/

respondido 30 nov., 12:14

Creo que solo necesita poner la lista 'viñeta' fuera del relleno.

li {
  list-style-position: outside;
  padding-left: 1em;
}

Respondido 20 ago 21, 11:08

Mi solución es bastante similar a Pumba80es uno, pero sugiero usar display: table en lugar de display:table-row por li elemento. Así que será algo como esto:

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

Respondido 20 ago 21, 11:08

La mejor respuesta absoluta. - Arad

Yo mismo soy muy aficionado a 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;
}

Respondido 20 ago 21, 11:08

único problema de tamaño de fuente - atilkan

Las listas ol, ul funcionarán si lo desea, también puede usar una tabla con borde: ninguno en el css.

Respondido el 06 de junio de 12 a las 21:06

creo que esta no es una buena solución con respecto a las reglas semánticas: kernfrucht

CSS proporciona solo dos valores para su "posición de estilo de lista": dentro y fuera. Con "dentro", las segundas líneas están al ras con los puntos de la lista, no con la línea superior:

En listas ordenadas, sin intervención, si le da a "posición de estilo de lista" el valor "dentro", la segunda línea de un elemento de lista larga no tendrá sangría, pero volverá al borde izquierdo de la lista (es decir, se alineará a la izquierda con el número del artículo). Esto es peculiar de las listas ordenadas y no sucede en las listas desordenadas.

Si, en cambio, le da a "list-style-position" el valor "outside", 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" configurado en "inside", mi lista no se veía como yo quería. Pero con "list-style-position" establecido en "outside", los números de los elementos de la lista quedaron fuera del cuadro.

Resolví esto simplemente configurando un margen izquierdo más amplio para toda la lista, lo que empujó toda la lista hacia la derecha, de vuelta a la posición en la que estaba antes.

CSS:

ol.nombreclase {margen:0;relleno: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;">

respondido 25 nov., 13:17

Ok, he vuelto y he descubierto algunas cosas. Esta es una SOLUCIÓN APROXIMADA 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 comienzo de cada elemento de la lista (

  • ) por lo que debe configurar el CSS en estilo de lista: ninguno;

    Luego, hice que se mostrara toda la lista: table-row. Toma, ¿por qué no te pego el código en lugar de parlotear?

    <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 tanto la lista como el texto con una etiqueta para poder decirle a todos los divs que se muestren como bloques en línea. Esto los alineó muy bien.

    El margen está ahí para poner un espacio entre el punto y el comienzo del texto. De lo contrario, chocan entre sí y parece una monstruosidad.

    Mi empleador quería que el texto envolvente (para entradas bibliográficas más largas) se alineara con el inicio de la primera línea, no con el margen izquierdo. Originalmente estaba jugando con un margen positivo y una sangría de texto negativa, pero luego me di cuenta de que cuando cambié a dos divs diferentes, esto tuvo el efecto de hacer que todo el texto se alineara porque el margen izquierdo del div era el margen donde el texto comenzaba naturalmente. Por lo tanto, todo lo que necesitaba era un margen de 0.2 em para agregar algo de espacio, y todo lo demás se alineó a la perfección.

    Espero que esto ayude si OP estaba teniendo un problema similar... Me costó entenderlo.

  • Respondido 15 Oct 13, 20:10

    Tuve este mismo problema y comencé a usar respuesta de user123444555621. Sin embargo, también necesitaba agregar padding y border a cada li, que esa solución no permite porque cada li es un table-row.

    Primero, usamos un counter para replicar el olnúmeros de.

    Luego establecemos display: table; en cada li y display: table-cell al :before para darnos la sangría.

    Finalmente, la parte difícil. Como no estamos usando un diseño de tabla para todo el ol tenemos que asegurarnos de que cada uno :before es del mismo ancho. Podemos usar el ch unidad para mantener aproximadamente el ancho igual al número de caracteres. Para mantener los anchos uniformes cuando el número de dígitos para el :before's difieren, podemos implementar consultas de cantidad. Suponiendo que sabe que sus listas no serán de 100 artículos o más, solo necesita una regla de consulta de cantidad para saber :before para 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>

    contestado el 23 de mayo de 17 a las 13:05

    No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.