2010-09-21 15 views
8

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.sangrado apropiado para listas ordenadas en html

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

+2

necesita mostrar algunos código o una captura de pantalla. –

Respuesta

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.

+0

Muchas gracias. Eso funcionó muy bien. Solo tuve que quitar el relleno a la izquierda y ahora se ve como quiero que se vea. – reggie

+0

Uggh. Hmm ... se ve bien en una página de prueba. Sin embargo, no podré usar el posicionamiento absoluto. – reggie

13

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.

+2

Eso alinea los números a la izquierda, sí. Pero el contenido de li no está alineado. – reggie

+1

Bueno dispara, ahora eres muy exigente. ;) Agregue un poco de relleno izquierdo a su li y vea si eso funciona. li {padding-left: 4em;} –

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

parece hacky. ¿Es este algún código generado por FireFox? – Mark

+0

@Mark añadiendo cualquier unidad después de 0 parece copiar-pegar desde Firebug, claro :) En cuanto a la parte * hacky *, para mi sorpresa parece funcionar en IE8 + de acuerdo con MDN: [list-style-type] (https: //developer.mozilla.org/en-US/docs/CSS/list-style-type). ¡Entonces +1 para Paul y bienvenido a SO! :) – FelipeAls

+0

no, me refiero a "decimal-leading-zero", nunca he visto esto en ningún CSS. – Mark

0

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/

+0

El problema con este enfoque es que selecciona los elementos secundarios, y no el enésimo elemento de la lista. Supongamos que mi lista comienza en 3, luego el décimo hijo sería el elemento 12.10 y 11 no sangrarían correctamente. – Kablam

Cuestiones relacionadas