html - tipos - ¿Cómo se pueden personalizar los números en una lista ordenada?
listas no ordenadas html (16)
¿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 tipo en el elemento ol.
Me interesan principalmente las respuestas que funcionan en Firefox 3.
Creo que esta es una respuesta que satisface tus requisitos:
li {
list-style-position: inside;
margin-bottom: .5em;
}
li span {
float: left;
margin-left: 2em;
margin-top: -1.25em;
}
<ol start="8">
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ol>
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, sería bueno reconsiderar si lo que estás tratando de lograr es realmente una buena idea.
En primer lugar, debe pensar si es una buena idea mostrar los artículos de una manera no estándar, con un separador diferente de los proporcionados.
No sé las razones para eso, pero supongamos que tiene buenas razones.
Las formas propuestas aquí para lograr que consisten en agregar contenido a su marcado, principalmente a través del CSS: antes de pseudoclass. Este contenido realmente está modificando su estructura DOM, agregándole esos elementos.
Cuando use la numeración "ol" estándar, tendrá un contenido renderizado en el que se puede seleccionar el texto "li", pero no se puede seleccionar el número que lo precede. Es decir, el sistema de numeración estándar parece ser más "decorativo" que el contenido real. Si agrega contenido para números utilizando, por ejemplo, los métodos ": antes", este contenido será seleccionable y, debido a esto, realizará problemas de vopy / paste no deseados o problemas de accesibilidad con lectores de pantalla que leerán este "nuevo" contenido además al sistema de numeración estándar.
Tal vez otro enfoque podría ser el estilo de 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 desactivadas, el tamaño del texto para el número no cambia, ...).
De todos modos, la razón de esta respuesta no es solo para proponer esta alternativa de "imágenes", sino para hacer que la gente piense en las consecuencias de tratar de cambiar el sistema de numeración estándar para las listas ordenadas.
El CSS para las listas de estilo está here , pero es básicamente:
li {
list-style-type: decimal;
list-style-position: inside;
}
Sin embargo, el diseño específico que está buscando probablemente solo se pueda lograr profundizando en las entrañas del diseño con algo como this (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 }
Esta es la solución que tengo trabajando en Firefox 3, Opera y Google Chrome. La lista aún se muestra en IE7 (pero sin el paréntesis de cierre y los números de alineación 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: Se incluye una corrección de línea múltiple por estratagema
También hay una solución CSS para cambiar de números a listas alfabéticas / romanas en lugar de usar el atributo tipo en el elemento ol.
Consulte la propiedad CSS del list-style-type . O al usar contadores, el segundo argumento acepta un valor de tipo de estilo de lista. Por ejemplo, lo siguiente utilizará Roman superior:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Este código hace que el estilo de numeración sea el mismo que el de los encabezados 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>
Existe el atributo Tipo 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>
Las otras respuestas son mejores desde un punto de vista conceptual. Sin embargo, puede simplemente dejar los números con el número apropiado de ''& ensp;'' para hacer que se alineen.
* Nota: al principio no reconocí que se estaba usando una lista numerada. Pensé que la lista se generaba explícitamente.
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>
La trampa es que esto definitivamente no funcionará en navegadores más antiguos o menos compatibles: display: inline-block es una propiedad muy nueva.
Los documentos 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 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;
}
Los números se alinean mejor si agrega ceros a los números, al configurar list-style-type a:
ol { list-style-type: decimal-leading-zero; }
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;
}
Prestó y mejoró la respuesta de Marcus Downing . Probado y funciona en Firefox 3 y Opera 9. Admite 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. */
}
Robó mucho de esto de otras respuestas, pero esto está funcionando en FF3 para mí. Tiene hendidura upper-roman , uniforme, un corchete cercano.
<!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>
Solución alternativa rápida y sucia . Puede usar 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 tu html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Tenga en cuenta que el espacio entre la etiqueta li y el comienzo del texto es un carácter de tabulación (lo que obtiene al presionar la tecla de tabulación dentro del bloc de notas).
Si necesita admitir navegadores antiguos, puede hacerlo 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>
Sugiero jugar con el atributo: before y ver qué puedes lograr con él. Significará que su código realmente está limitado a nuevos y agradables navegadores, y excluye a la sección (molestamente grande) del mercado que sigue usando viejos navegadores,
Algo como lo siguiente, que obliga a fijar con 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 vuelve complicado.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Pero vas a tener que experimentar para encontrar la solución exacta.
También puede especificar sus propios números en el HTML, por ejemplo, si una base de datos proporciona los números:
<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) , utilizamos content: attr(seq) :
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}