¿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 itemTambié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.
Me interesan principalmente las respuestas que funcionan en Firefox 3.
Respuestas:
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 extraño
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.
Consulte la propiedad CSS de tipo de estilo de lista . O cuando se utilizan 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;
/* ... */ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
El CSS para diseñar listas está aquí , 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 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 }También puede especificar sus propios números en el HTML, por ejemplo, si los números los proporciona una base de datos:
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>El seqatributo 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).
value="4A", ya que no funcionará. Además, el atributo de valor puede funcionar con el typeatributo, pero el valor debe ser un número (ya que funciona dentro de un conjunto ordenado).
reversedatributo es solo html5, al igual que el uso valuede li). En lugar de usar su seq, configuré a valuey usé en attr(value)lugar deattr(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é se puede lograr con él. Significará que su código realmente está limitado a buenos navegadores nuevos, y excluye la sección (molestamente grande) del mercado que todavía usa navegadores viejos y basura,
Algo como lo siguiente, que fuerza un fijo con 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 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 a los números, estableciendo list-style-type en:
ol { list-style-type: decimal-leading-zero; }valueatributo (no se necesita CSS)Los navegadores modernos interpretarán el valueatributo y lo mostrarán como espera. Consulte la documentación de MDN .
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>También echar un vistazo a la <ol>artículo sobre MDN , especialmente la documentación para el starty atributo.
Tomó prestada y mejoró la respuesta de Marcus Downing . Probado y funciona en Firefox 3 y Opera 9. También admite varias 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. */
}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>Los docs dicen sobre 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 tema de los marcadores.
Un ejemplo es:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}No ... solo usa 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;
}Lo tengo. Intente 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-blockes una propiedad muy nueva.
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 tu html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>Tenga en cuenta que el espacio entre la lietiqueta y el comienzo del texto es un carácter de tabulación (lo que obtiene cuando presiona la tecla de tabulación 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>Las otras respuestas son mejores desde un punto de vista conceptual. Sin embargo, puede simplemente rellenar los números con el número apropiado de '& ensp;' para que se alineen.
* Nota: Al principio no reconocí 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.
Primero, debe pensar si es una buena idea mostrar los elementos de una manera no estándar, con un carácter separador diferente al proporcionado.
No sé las razones de eso, pero supongamos que tiene buenas razones.
Las formas aquí propuestas para lograr eso consisten en agregar contenido a tu marcado, principalmente a través del CSS: antes de la pseudoclase. Este contenido realmente está modificando la estructura de su DOM, agregando esos elementos.
Cuando utilice la numeración estándar "ol", tendrá un contenido renderizado en el que se puede seleccionar el texto "li", pero el número que lo precede no se puede seleccionar. Es decir, el sistema de numeración estándar parece ser más "decoración" que contenido real. Si agrega contenido para números utilizando, por ejemplo, los métodos ": before", este contenido será seleccionable y, debido a esto, se realizarán problemas de vopy / pegado no deseados o problemas de accesibilidad con lectores de pantalla que leerán este contenido "nuevo" 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 para el número no cambia, ...).
De todos modos, el motivo de esta respuesta no es solo para proponer esta alternativa de "imágenes", sino para hacer pensar a la gente en las consecuencias de intentar cambiar el sistema de numeración estándar por listas ordenadas.
Este código hace que el estilo de numeración sea el mismo que los encabezados del contenido de 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>