sangrado apropiado para listas ordenadas en html

Question

No puedo obtener una lista ordenada para mostrar la sangría correcta. Los números están alineados a la derecha. De modo que el navegador (Chrome) muestra un espacio antes de los números de un solo dígito y solo alinea los números de dos dígitos correctamente a la izquierda.

¿Cómo puedo generar una buena lista ordenada donde todos los números están alineados a la izquierda y los elementos de la lista comienzan todos uno debajo del otro?

Answer 1

Si no le importa usar el posicionamiento absoluto, esto podría funcionar para usted.

<style type="text/css"> 
li { 
    list-style-position: inside; 
} 
.li-content { 
    position: absolute; 
    left: 80px; 
} 
</style> 

<ol> 
    <li><span class="li-content">Test content</span></li> 
    (...) 
    <li><span class="li-content">Test content</span></li> 
</ol> 

Nota: Si tienes algo que aparece a la izquierda del elemento <ol> en su página (como un div flotante), de que el contenido se moverá los números a la derecha, pero no el acutal <li> contenido.

También podría usar una técnica completamente diferente, con un marcado diferente (elementos div anidados) con visualización: tabla y pantalla: propiedades de celda de tabla establecidas. Eso eliminaría el problema con los elementos que aparecen a la izquierda, pero requeriría que utilice la propiedad CSS counter.

Answer 2

En realidad, la solución es bastante simple, acaba de establecer

ol {list-style-position: inside;} 

Y sus números debe "alinear a la izquierda", como lo desea.

Answer 3

tarde a la fiesta pero he estado luchando con este problema por mí mismo y terminó usando este combo que añade un cero antes de que los elementos de la lista de un solo dígito:

ol { 
    margin:0px 0; 
    padding:0; 
    list-style: decimal-leading-zero inside none; 
} 

ol li 
{ 
    margin: 0px; 
    padding: 0px; 
    text-indent: -2.2em; 
    margin-left: 3.4em; 
} 

Answer 4

Usted puede utilizar CSS para seleccionar una distancia; en este caso, desea elementos de la lista 1-9:

ol li:nth-child(n+1):nth-child(-n+9) 

luego ajustar los márgenes en los primeros artículos apropiada:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; } 
ol li:nth-child(n+1):nth-child(-n+9) em, 
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; } 

verlo en acción aquí: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/