¿Cómo puede personalizar los números en una lista ordenada?
¿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 hay una solución CSS para cambiar de números a listas alfabéticas/romanas en lugar de usar el atributo type en el elemento ol.
Estoy principalmente interesado en las respuestas que funcionan en Firefox 3.
15 answers
Esta es la solución que tengo trabajando en Firefox 3, Opera y Google Chrome. La lista todavía se muestra en IE7 (pero sin el corchete de cierre y los números de 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 hay una solución CSS para cambiar de números a listas alfabéticas/romanas en lugar de usar el atributo type en el elemento ol.
Refiérase a propiedad CSS list-style-type. O cuando usando contadores el segundo argumento acepta un valor list-style-type. Por ejemplo, lo siguiente usará romano superior:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-30 09:57:57
El CSS para las listas de estilos es aquí , pero básicamente es:
li {
list-style-type: decimal;
list-style-position: inside;
}
Sin embargo, el diseño específico que está buscando probablemente solo se puede lograr profundizando en las entrañas del diseño con algo como esto (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 }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-14 19:18:09
Robó mucho de esto de otras respuestas, pero esto está funcionando 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-10 00:22:30
También puede especificar sus propios números en el HTML, por ejemplo, si los números están siendo proporcionados por 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 atributo seq se hace visible usando 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) ". ";
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-05 04:53:54
Sugiero jugar con el atributo :before y ver qué se puede lograr con él. Esto significará que su código realmente se limita a los nuevos navegadores agradables, y excluye la sección (molestamente grande) del mercado que todavía utiliza navegadores antiguos basura,
Algo como lo siguiente, que fuerza un fijo con en los elementos. Sí, sé que es menos elegante tener que elegir el ancho usted mismo, pero usar CSS para su diseño es como un trabajo policial encubierto: por buenos que sean sus motivos, siempre se complica.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Pero vas a tener que experimentar para encontrar la solución exacta.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-08-18 14:51:27
Los números se alinean mejor si agrega ceros iniciales a los números, estableciendo list-style-type a:
ol { list-style-type: decimal-leading-zero; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-08-24 10:30:06
Tomó prestada y mejoró la respuesta de Marcus Downing. Probado y funciona en Firefox 3 y Opera 9. Soporta múltiples líneas, también.
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. */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:09
Existe el atributo de tipo que le permite cambiar el estilo de numeración, sin embargo, no puede cambiar el punto completo después del número/letra.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-28 10:53:54
Los documentos dicen respecto a list-style-position: outside
CSS1 no especificó la ubicación precisa de la caja de marcadores y por razones de compatibilidad, CSS2 sigue siendo igualmente ambigua. Para un control más preciso de las cajas de marcadores, utilice marcadores.
Más arriba en esa página están las cosas sobre los marcadores.
Un ejemplo es:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-28 06:53:43
No... simplemente use un 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-22 23:45:10
Lo tengo. Prueba 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 este definitivamente no funcionará en navegadores más antiguos o menos compatibles: display: inline-block es una propiedad muy nueva.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-28 14:49:18
Solución alternativa rápida y sucia . Puede utilizar un carácter de tabulación junto con texto preformateado. Aquí hay una posibilidad:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
Y su html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Tenga en cuenta que el espacio entre la etiqueta li y el inicio del texto es un carácter de tabulación (lo que se obtiene cuando se presiona la tecla tab dentro del bloc de notas).
Si necesita admitir navegadores más antiguos, puede hacer esto en su lugar:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-01 17:56:42
Las otras respuestas son mejores desde un punto de vista conceptual. Sin embargo, solo puedes dejar los números con el número apropiado de '' para que se alineen.
* Nota: Al principio no reconocí que se estaba utilizando una lista numerada. Pensé que la lista estaba siendo generada explícitamente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-28 02:44:12
Daré aquí el tipo de respuesta que generalmente no me gusta leer, pero creo que como hay otras respuestas que te dicen cómo lograr lo que quieres, podría ser bueno repensar si lo que estás tratando de lograr es realmente una buena idea.
Primero, debe pensar si es una buena idea mostrar los elementos de una manera no estándar, con un separador de caracteres diferente al proporcionado.
No conozco las razones para eso, pero supongamos que tienes buenas razones.
El formas propuestas aquí para lograr que consisten en agregar contenido a su marcado, principalmente a través del CSS: before pseudoclass. Este contenido realmente está modificando tu estructura DOM, agregándole esos elementos.
Cuando utiliza la numeración estándar "ol", tendrá un contenido renderizado en el que el texto "li" es seleccionable, pero el número que lo precede no es seleccionable. Es decir, el sistema de numeración estándar parece ser más "decoración" que contenido real. Si agrega contenido para números usando para ejemplo de esos métodos": before", este contenido será seleccionable, y debido a esto, realizando problemas de vopy/paste no deseados, o problemas de accesibilidad con lectores de pantalla que leerán este "nuevo" contenido además del sistema de numeración estándar.
Tal vez otro enfoque podría ser el estilo de los números utilizando 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 para el número no cambia, ...).
De todos modos, la razón porque esta respuesta no es solo 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-08 17:10:48
Este código hace que el estilo de numeración sea el mismo que las cabeceras de 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-27 14:52:35