109

¿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.

Me interesan principalmente las respuestas que funcionan en Firefox 3.

html css html-lists roman-numerals grom
fuente

98

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>

Expandir fragmento

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;
/* ... */

grom
fuente

Necesitaba volver a agregar los números, un estilo global los estaba eliminando (¿quién sabe por qué usaría un ol y eliminaría los números en lugar de un ul?). Respuesta muy clara +1 para explicación y código completos, se puede modificar fácilmente para hacer cualquier cosa.

Morvael

Sugiero un limpiador de CSS margen / relleno de solución, que funciona mejor con las listas de ellas con gran numeración:

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;}

.

mmj

28

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 }

Marcus Downing
fuente

1

Esto alinea los números, pero el contenido del texto no.

Grom

13

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>

Expandir fragmento

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).

Demostración en CodePen con más estilo

z0r
fuente

7

Puede simplificar esto si solo usa el valueatributo en <li>. ej <li value="20">. Entonces no necesitas ningún pseudoelemento. Demo

GWB

1

@GWB Si bien eso es válido (y una buena solución), está limitado a valores numéricos ya que la lista es ordinal. Como tal, no puede hacer algo así 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).

jedd.ahyoung

Gracias, esto funcionó para mí cuando necesitaba que Flying Saucer mostrara una lista en orden inverso (el 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)

jaygooby

8

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>

Steve Perks
fuente

5

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.

Marcus Downing
fuente

necesitará un reinicio de contador: item; antes de ese bloque.

Greg

5

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; }

Peter Hilton
fuente

5

HTML5: use el `value`atributo (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>

Expandir fragmento

También echar un vistazo a la <ol>artículo sobre MDN , especialmente la documentación para el starty atributo.

Flimm
fuente

4

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. */
}

extraño
fuente

También quieres text-align: left; no está bien. Y la última línea debería ser margin-left: -3.5em;

Grom

@grom, Gracias por la corrección em. Además, Opera renderiza listas alineadas a la derecha por defecto, así que imité este comportamiento.

extraño

@grom, El problema de Firefox es ... Firefox pone el pseudoelemento li: before en su propia línea sin el flotador, incluso si es display: inline-block.

extraño

@strager, bueno, estoy usando 3.0.4 en Linux y 3.0.3 en Windows, y me funciona sin el flotador: izquierda; regla.

grom

@grom, Hmm, interesante. Me acabo de poner a prueba y funciona sin el flotador. Quizás escribí mal.

extraño

2

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>

GateKiller
fuente

El marcado en esta respuesta debe corregirse. Utilice minúsculas y encierre los valores de los atributos entre "comillas".

dylanfm

Y cierre sus elementos: <li> ... </li>.

dylanfm

@dylanfm: sabe que el marcado presentado es correcto, HTML 100% válido, ¿no? No rechace a las personas por no usar XHTML a menos que se solicite XHTML.

Ben Blank

No te voté en contra. Y sí, eso es cierto. HTML. Solo estaba siendo una persona exigente y estándar.

dylanfm

Mis disculpas por publicar HTML inválido. Copié el código de un sitio web y no pensé en corregirlo. Me siento avergonzado ahora :(

GateKiller

1

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;
       }

Stephen Denne
fuente

Todos los ejemplos (consulte w3.org/TR/CSS2/generate.html#q11 ) para marcadores no me funcionan.

grom

1

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;
}

William Entriken
fuente

0

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.

Marcus Downing
fuente

0

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>

Marco Luglio
fuente

0

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.

Metro
fuente

0

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.

tomasofen
fuente

0

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>

Vlad Alivanov
fuente

¿Cómo se pueden personalizar los números en una lista ordenada?

Respuestas:

HTML5: use el `value`atributo (no se necesita CSS)

¿Cómo se pueden personalizar los números en una lista ordenada?

Respuestas:

HTML5: use el valueatributo (no se necesita CSS)

HTML5: use el `value`atributo (no se necesita CSS)