¿Cómo se pueden personalizar los números en una lista ordenada?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo puedo alinear a la izquierda los números en una lista ordenada?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
¿Cambiar el carácter después del número en una lista ordenada?
1) an item
También existe una solución CSS para cambiar de números a listas alfabéticas/romanas en lugar de usar el atributo de tipo en el elemento ol.
Lo que más me interesa son las respuestas que funcionan en Firefox 3.
Solución
Esta es la solución que tengo funcionando en Firefox 3, Opera y Google Chrome.La lista todavía se muestra en IE7 (pero sin los números entre corchetes y alineación a la izquierda):
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>EDITAR: Incluye corrección de múltiples líneas por Strager.
También existe una solución CSS para cambiar de números a listas alfabéticas/romanas en lugar de usar el atributo de tipo en el elemento ol.
Referirse a tipo de estilo de lista Propiedad CSS.O cuando se usan contadores, el segundo argumento acepta un valor de tipo estilo de lista.Por ejemplo, lo siguiente utilizará el romano superior:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Otros consejos
El CSS para diseñar listas es aquí, pero es básicamente:
li {
list-style-type: decimal;
list-style-position: inside;
}
Sin embargo, el diseño específico que busca probablemente solo se pueda lograr profundizando en las entrañas del diseño con algo como este (tenga en cuenta que en realidad no lo he probado):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
También puede especificar sus propios números en el HTML, p.e.si los números los proporciona una base de datos:
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>
El seq El atributo se hace visible utilizando un método similar al dado en otras respuestas.Pero en lugar de usar content: counter(foo), usamos content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
Robé mucho de esto de otras respuestas, pero esto funciona en FF3 para mí.Tiene upper-roman, sangría uniforme, un corchete cerrado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Sugiero jugar con el atributo :before y ver qué puedes lograr con él.Significará que su código realmente se limita a navegadores nuevos y agradables y excluye la sección (molestamente grande) del mercado que todavía usa navegadores antiguos y basura.
Algo como lo siguiente, que fuerza un arreglo en los elementos.Sí, sé que es menos elegante tener que elegir el ancho tú mismo, pero usar CSS para tu diseño es como un trabajo policial encubierto:Por muy buenos que sean tus motivos, siempre se complica.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Pero tendrás que experimentar para encontrar la solución exacta.
Los números se alinean mejor si agrega ceros a la izquierda, configurando tipo de estilo de lista a:
ol { list-style-type: decimal-leading-zero; }
Prestado y mejorado La respuesta de Marcus Downing.Probado y funciona en Firefox 3 y Opera 9.También admite múltiples líneas.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
Ahí está el Tipo de atributo lo que le permite cambiar el estilo de numeración, sin embargo, no puede cambiar el punto después del número/letra.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
Los médicos dicen con respecto a list-style-position: outside
CSS1 no especificó la ubicación precisa del cuadro de marcador y, por razones de compatibilidad, CSS2 sigue siendo igualmente ambiguo.Para un control más preciso de los cuadros de marcadores, utilice marcadores.
Más arriba en esa página está el material sobre marcadores.
Un ejemplo es:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
No...solo usa una DL:
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}
Lo tengo.Pruebe lo siguiente:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>
El problema es que esto definitivamente no funcionará en navegadores más antiguos o menos compatibles: display: inline-block Es una propiedad muy nueva.
Rápido y sucio solución alternativa.Puede utilizar un carácter de tabulación junto con texto preformateado.He aquí una posibilidad:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
y tu html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Tenga en cuenta que el espacio entre el li etiqueta y el comienzo del texto es un carácter de tabulación (lo que obtienes cuando presionas la tecla tab dentro del bloc de notas).
Si necesita admitir navegadores más antiguos, puede hacer esto:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
Las otras respuestas son mejores desde un punto de vista conceptual.Sin embargo, puedes simplemente rellenar los números con el número apropiado de ' ' para que se alineen.
* Nota:Al principio no me di cuenta de que se estaba utilizando una lista numerada.Pensé que la lista se estaba generando explícitamente.
Daré aquí el tipo de respuesta que normalmente no me gusta leer, pero creo que como hay otras respuestas que te dicen cómo lograr lo que quieres, sería bueno repensar si lo que estás tratando de lograr es realmente una buena idea.
En primer lugar, deberías pensar si es una buena idea mostrar los elementos de una forma no estándar, con un carácter separador diferente al proporcionado.
No sé las razones, pero supongamos que tienes buenas razones.
Las formas propuestas aquí para lograrlo consisten en agregar contenido a tu marcado, principalmente a través de la pseudoclase CSS :before.Este contenido realmente está modificando su estructura DOM, agregándole esos elementos.
Cuando utiliza la numeración "ol" estándar, tendrá un contenido renderizado en el que el texto "li" se puede seleccionar, pero el número que lo precede no se puede seleccionar.Es decir, el sistema de numeración estándar parece más una "decoración" que un contenido real.Si agrega contenido para números utilizando, por ejemplo, los métodos ":before", este contenido se podrá seleccionar y, debido a esto, se producirán problemas no deseados de copiar/pegar o problemas de accesibilidad con los lectores de pantalla que leerán este "nuevo" contenido además. al sistema de numeración estándar.
Quizás otro enfoque podría ser diseñar los números usando imágenes, aunque esta alternativa traerá sus propios problemas (los números no se muestran cuando las imágenes están deshabilitadas, el tamaño del texto del número no cambia,...).
De todos modos, el motivo de esta respuesta no es sólo proponer esta alternativa de "imágenes", sino hacer pensar en las consecuencias de intentar cambiar el sistema de numeración estándar para listas ordenadas.
Este código hace que el estilo de numeración sea el mismo que el de los encabezados del contenido li.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
