Come modellare il numero su un elenco html?

Question

È possibile modellare o aumentare la dimensione dei numeri solo in un elenco ordinato?

Sto pianificando di trasformare una lista ordinata ol in passi come wikihow utilizzando solo CSS.

Ecco un esempio con cui giocare: http://jsfiddle.net/ejRzy/1/

Answer 1

Esso può essere fatto utilizzando CSS3 ma non al 100% cross browser (cioè IE7). usando lo pseudo: before element e counter-reset e counter-increment puoi nascondere lo stile list e crearne uno tuo.

Ecco un articolo che illustra come: Styling ordered list numbers

e here è una demo costruita da tale articolo.

Anche nel caso del collegamento marciume temuto - Ecco il codice CSS principale richiesto (questo può essere applicato a qualsiasi lista ordinata)

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

Questo codice produrrà un elenco personalizzato ordinata; anche se non lo stile che hai chiesto. Lascerò il lavoro di personalizzazione a voi :) evviva

Answer 2

tipo di stile .... il tuo elenco ordinato con la dimensione del carattere che si desidera per i numeri, poi avvolgere tutti i tuoi elementi dell'elenco in campate, e dare loro un stile diverso.

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