¿Cómo se escribe el número en una lista html?

¿Es posible darle estilo o aumentar el tamaño de los números solo en una lista ordenada?¿Cómo se escribe el número en una lista html?

Estoy planeando convertir una lista ordenada ol en algo así como wikihow pasos utilizando solo CSS.

Aquí está un ejemplo para jugar con: http://jsfiddle.net/ejRzy/1/

Fuente

2012-06-25 Filype

posible duplicado de [¿Hay una manera fácil de cambiar el color de una viñeta en una lista?] (Http://stackoverflow.com/questions/76564/is- there-an-easy-way-to-change-the-color-of-a-bullet-in-a-list) –

No es posible. Puede agregar los números usted mismo en HTML. – iambriansreed

@iambriansreed es posible; simplemente no es 100% compatible con cross. – rlemon

Se puede hacer usando CSS3 pero no 100% navegador cruz (es decir, IE7). utilizando el elemento pseudo: before y counter-reset y counter-increment puedes ocultar el estilo de lista y crear el tuyo propio.

aquí es un artículo que resume la forma: Styling ordered list numbers

y here es una demostración construido a partir de ese artículo.

También en el caso de la pudrición de enlace temida - Este es el código CSS principal requerida (esto se puede aplicar a cualquier lista ordenada)

ol { 
    counter-reset:li; /* Initiate a counter */ 
    margin-left:0; /* Remove the default left margin */ 
    padding-left:0; /* Remove the default left padding */ 
} 
ol > li { 
    position:relative; /* Create a positioning context */ 
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */ 
    padding:4px 8px; /* Add some spacing around the content */ 
    list-style:none; /* Disable the normal item numbering */ 
    border-top:2px solid #666; 
    background:#f6f6f6; 
} 
ol > li:before { 
    content:counter(li); /* Use the counter as content */ 
    counter-increment:li; /* Increment the counter by 1 */ 
    /* Position and style the number */ 
    position:absolute; 
    top:-2px; 
    left:-2em; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    width:2em; 
    /* Some space between the number and the content in browsers that support 
     generated content but not positioning it (Camino 2 is one example) */ 
    margin-right:8px; 
    padding:4px; 
    border-top:2px solid #666; 
    color:#fff; 
    background:#666; 
    font-weight:bold; 
    font-family:"Helvetica Neue", Arial, sans-serif; 
    text-align:center; 
} 
li ol, 
li ul {margin-top:6px;} 
ol ol li:last-child {margin-bottom:0;}

Este código producirá una lista personalizada ordenada; aunque no es el estilo que pediste. Voy a dejar el trabajo de personalización a usted :) aplausos

Fuente

2012-06-25 03:02:47 rlemon

tipo de estilo .... su lista ordenada con el tamaño de fuente que desea para los números, luego envolver todos los elementos de la lista en vanos, y darles una estilo diferente.

http://jsfiddle.net/keith_nicholas/MEHXj/

Fuente

2012-06-25 02:23:15

Esa es una buena alternativa, la respuesta correcta es que no es posible aunque – Filype

seguro, pero en el espíritu de stackoverflow, no dejamos de que no sea posible, empezamos a buscar las formas en que podemos evitar las cosas para lograr lo que queremos :) –

Si bien la respuesta de @ rlemon es la mejor, IMO, esta respuesta es probablemente la más compatible con varios navegadores, aunque usa más marcado. ¿Por qué los downvotes en esto? –

¿Cómo se escribe el número en una lista html?

Respuesta

Cuestiones relacionadas