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

260

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 como 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 las segundas líneas "internas" 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

Ancho "fuera" de mi lista ya no está al ras con bloques de texto superiores.

Los experimentos de ancho de texto, sangría, relleno izquierdo y margen izquierdo funcionan para listas desordenadas, pero fallan para 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 alineados 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 segunda línea? ¡Gracias por tu esfuerzo!

html  css  html-lists 
— Kernfrucht
fuente
1
El usuario Pali Madra agregó esto como respuesta, pero se eliminó por no contener más explicación. Dijo que jsfiddle puede ser lo que estás buscando: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
Tratar de establecer padding-left única ...
— matzone
3
En caso de que alguien tropiece con esta pregunta, que solo está buscando "sangría de lista básica", eche un vistazo a esta pregunta ( stackoverflow.com/questions/17556496/… ) y la respuesta de Natasha Banegas.
— SunnyRed
Ninguna respuesta responde a la pregunta real. La pregunta real es cómo alinear a la izquierda los dígitos de la lista, mientras se alinea por separado a la izquierda el texto del elemento de la lista con el texto del elemento sobre él cuando ese texto se desborda a una segunda línea o una línea posterior. Por defecto, 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.
— Jessie Westlake

Respuestas:

267

Actualizar

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

ul {
  list-style-position: outside;
}

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

Respuesta original

Me sorprende ver que esto aún no se ha resuelto. Puede utilizar el algoritmo de diseño de tabla 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/

ingrese la descripción de la imagen aquí

Para que funcione en IE8, use la :beforenotación heredada con dos puntos.

— usuario123444555621
fuente
2
@Perelli fooes sólo una cadena arbitraria (id), que se utiliza para conectar los counter-reset, counter-incrementy counter()propiedades.
— user123444555621
3
También puede evitar los elementos de la tabla inestable mediante el uso position: relativeen <li>y position: absolutesobre el contenido generado. Consulte jsfiddle.net/maryisdead/kgr4k para ver un ejemplo.
— maryisdead
2
@maryisdead ¿Por qué 40px? Eso se romperá cuando los mostradores sean más anchos que eso . El punto principal de usar el diseño de la tabla es que el navegador ajustará automáticamente el contenido.
— usuario123444555621
55
Bien, pero ¿cómo controlas el <li> margen inferior? La altura de <li> está determinada únicamente por la altura de los elementos de celda de tabla que contiene. Por lo tanto, el margen, el relleno y la altura de esos elementos no tienen efecto. ¿Cómo evitar esta limitación?
— hschmieder
3
Si tiene elementos de lista de varias líneas y necesita un espaciado vertical consistente, la solución es agregar un espaciado de borde vertical al selector ol, por ejemplo, espaciado de borde: 0 3px; El relleno normal en la celda de la tabla no funciona porque el número siempre es solo una línea.
— RemBem
207

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/

ingrese la descripción de la imagen aquí

— JTOrlando
fuente
21
mejor si también agrega padding-left: 1em;
— Bence Gacsályi
16
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 con qué respuesta elegir, elija esta.
— Valentin Mercier
25
@loremmonkey Esto es rápido y sucio, pero no es una solución real. Primero, 1emno es igual al espacio de la sangría. Las líneas no se alinearán perfectamente en cuanto a píxeles. En segundo lugar, ¿qué pasa cuando la lista alcanza el número 10? 100? La sangría de texto no funcionará, no estará alineada. Esta respuesta debe ser rechazada.
— Soleado
1
@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.
— lorem monkey
2
@loremmonkey La sangría no lo es 1em. oi60.tinypic.com/a0eyvs.jpg El primer elemento de la lista está utilizando la técnica de sangría de texto anterior. Comparado con su aspecto normal con list-style-position: en el exterior, está desalineado, apagado por un píxel.
— Soleado
39

La forma más fácil y limpia, sin ningún truco, es simplemente sangrar el ul(o ol), así:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

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

Captura de pantalla:

ingrese la descripción de la imagen aquí

— Chuck Le Butt
fuente
1
Es posible que deba aplicar list-style-position: outsidea <li>.
— Alex
@Alex Solo debería hacer esto si está forzando la sobrescritura de un estilo existente ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).
— Chuck Le Butt
25

Mira este violín:

http://jsfiddle.net/K6bLp/

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

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

Anótelo.

— Deepan Babu
fuente
gracias, funciona muy bien para UL y para OL hasta 9 entradas de lista. Este es el problema principal que describí en el ancho de 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 donde pueda reaccionar a través de CSS y ajustar la sangría de texto y el margen izquierdo al número 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 ir por jquery.
— Deepan Babu
También tenga en cuenta que el typeatributo de <ol>parece estar en desuso en HTML 5. Utilice en su style="list-style-type: "lugar.
— AJ.
2
¿21 de ustedes son personas serias? esto no funciona. No estoy seguro si cambió su código desde que publicó.
— JGallardo
9

Puede establecer el margen y el relleno de un olo ulen CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
fuente
desafortunadamente, el problema no se resuelve con esta solución: las segundas líneas están alineadas con los puntos de la lista, no el ancho de la fila superior, ver ejemplo arriba
— kernfrucht
11 y 12 en jsfiddle.net/j7MEd/1 se alinean 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 problema principal es que la segunda (y tercera, etc.) línea de cada punto de la lista no tiene la misma "sangría" como la primera línea! (ver jsfiddle-example). En mi pregunta anterior, pienso en una solución alternativa con relleno, margen, etc., pero solo funciona para listas sin ordenar. 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 la cosa del 11/12.
— kernfrucht
Ok lo siento te tengo! Esta es una forma ... el único problema es lograr un navegador cruzado, tendrá que establecer el margen en IE y el relleno en Firefox. jsfiddle.net/j7MEd/2
— luke2012
7

Creo que solo necesita poner la lista 'bala' fuera del relleno.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— Color conocido
fuente
6

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

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

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

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/

— LaFaucon
fuente
5

El siguiente CSS hizo el truco:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— itoctopus
fuente
4

mi solución es bastante similar a la de Pumbaa80 , pero sugiero usar en display: tablelugar de display:table-rowpara lielement. Entonces 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 para espaciar los márgenes entre li's

— Alex
fuente
1

Yo mismo aprecio bastante 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;
}
— Corey Ballou
fuente
solo tamaño de fuente problemático
— atilkan
0

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

— Casualbot
fuente
Creo que esto no es una buena solución, sobre normas semánticas
— kernfrucht
0

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

En listas ordenadas, sin intervención, si asigna a "posición-estilo-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 ocurre en listas desordenadas.

Si en cambio le das a "list-style-position" el valor "afuera", la segunda línea tendrá la misma sangría que la primera línea.

Tenía una lista con un borde y tuve este problema. Con "list-style-position" establecido en "inside", mi lista no se veía como 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 estableciendo un margen izquierdo más amplio para toda la lista, que empujó toda la lista hacia la derecha, nuevamente en 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;">
— Chris
fuente
-1

Ok, volví y descubrí algunas cosas. Esta es una SOLUCIÓN EN BRUTO a lo que estaba proponiendo, pero parece ser funcional.

Primero, hice 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 al estilo de lista: ninguno;

    Luego, hice que se mostrara toda la lista: tabla-fila. Aquí, ¿por qué no te pego el código en lugar de comentarlo?

    <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 inicio del texto. De lo contrario, corren uno contra el otro y parece una monstruosidad.

    Mi empleador quería que el texto envolvente (para entradas bibliográficas más largas) se alineara con el comienzo de la primera línea, no con el margen izquierdo. Originalmente estaba inquieto 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 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 estaba teniendo un problema similar ... Me costó entenderlo.

    • — David
    fuente
    -1

    Tuve este mismo problema y comencé a usar la respuesta del usuario123444555621 . Sin embargo, también necesitaba agregar paddingy bordera cada uno li, lo que esa solución no permite porque cada uno lies un table-row.

    Primero, usamos a counterpara replicar los olnúmeros de.

    Luego nos ponemos display: table;en cada uno liy display: table-cellen el :beforepara darnos la sangría.

    Finalmente, la parte difícil. Como no estamos utilizando un diseño de tabla para todo, oldebemos asegurarnos de que cada uno :beforetenga el mismo ancho. Podemos usar la chunidad para mantener aproximadamente el ancho igual al número de caracteres. Para mantener los anchos uniformes cuando :beforedifiere el número de dígitos para los , 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 indicar :beforeque cambie su ancho, pero puede agregar fácilmente más.

    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>
    Expandir fragmento

    — Jacob Alvarez
    fuente
    Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
    Licensed under cc by-sa 3.0 with attribution required.