2012-09-16 20 views
12

He configurado el list-style-type en CSS, pero por alguna razón no lo muestra.CSS list-style-type no funciona

body { 
 
    margin: 0; 
 
} 
 
ol { 
 
    list-style-type: decimal; 
 
    padding-left: 0; 
 
}
<ol> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
</ol>

+3

Revise su margen y relleno ... – yckart

Respuesta

46

Debido a su restablecimiento relleno, los números son en realidad fuera a la izquierda de la página. Intente agregar:

list-style-position: inside; 
4

Decimal es un valor predeterminado para "ol". No es necesario declararlo. También los números están simplemente cayendo del costado de la página, es decir, invisibles. Ajuste su relleno y elimine la declaración redundante. See here

+0

Gracias por el consejo. Siempre pensé que algunos navegadores usan diferentes estilos, y el tipo de estilo puede variar, esa es la razón por la que lo puse allí. – SeinopSys

+2

desde w3c "Las listas ordenadas y no ordenadas se representan de manera idéntica, excepto que los agentes de usuario visuales enumeran los artículos de la lista ordenada. Los agentes de usuario pueden presentar esos números de varias maneras. Los elementos de la lista no ordenados no están numerados." – noel

+0

Si antes usa un archivo de restablecimiento de CSS, el ol se puede establecer en un valor diferente – iBorg

12
display:list-item; 
list-style-position:outside; 

Se puede dar problemas si la lista display: atributo se establece en algo más que display:list-item;

0

acaba de quitar "display: block;" desde su elemento li

2

Si nada de esto funciona, asegúrese de que no haya elementos marcados explícitamente como bloque de visualización dentro de la LI. Me acaba de pasar con un conjunto de H4 A como bloque dentro del LI. Estaba a punto de renunciar