Impostare i valori del tag LI in HTML

Question

Ho un elenco ordinato per il quale ho bisogno di impostare i valori #. Qualcosa di simile:

<ol> 
<li ShowValue=34>apple</li> 
<li ShowValue=45>pear</li> 
<li ShowValue=55>car</li> 
</ol> 

modo che mostrino con i numeri assegno

34.apple 
45.pear 
55.car 

C'è un modo per dire al LI che numero dovrebbe mostrare?

Answer 1

Se si utilizza HTML 4.01 si può fare questo:

<ol> 
    <li value="34">apple</li> 
    ... 
</ol> 

preavviso Bu che this is deprecated.

Answer 2

Che dire prendere una lista non ordinata e scrivere il numero all'interno?

<ul> 
    <li>34. apple</li> 
    <li>45. pear</li> 
    <li>55. car</li> 
</ul> 

Quindi occorrerebbe nascondere i punti elenco. Utilizzare

ul { 
    list-style-type: none; 
} 

per quello.

Answer 3

Dipende da come viene generato l'HTML. Se è statico, poi semplicemente digitando i valori nei avrebbe funzionato:

<li value="35">35.apple</li> 

Se è generato sul lato server, quindi è possibile aggiungere nel codice del server.

Il terzo modo sarebbe utilizzare jQuery per modificare i contenuti dopo il rendering.

Answer 4

L'approccio HTML:

<ol start="34"> 
    <li>apple</li> 
    <li>pear</li> 
    <li>car</li> 
</ol> 

questo è deprecato in HTML4 a favore dei CSS generato contenuti:

<style type="text/css"> 
    .mylist { counter-reset: mycounter 34; } 
    .mylist li { counter-increment: mycounter; list-style-type: none; } 
    .mylist li:before { content: counter(mycounter) ". "; } 
</style> 

<ol class="mylist"> 
    <li>apple</li> ... 
</ol> 

Questo ha alcuni vantaggi in quanto si può anche lasciare un elenco gestito attraverso senza reimpostare (per se hai 33 altre cose in una lista precedente). Tuttavia non funziona in IE6/IE7, quindi puoi dimenticarlo per ora.

Il ritiro di <ol start> (e <li value>) è una questione di alcune controversie. Molti (me compreso) credono che sia stato un errore, poiché il numero di lista è più vicino al contenuto che alla presentazione nel caso comune di un elenco continuo. Mentre l'hack HTML è dichiaratamente cattivo, IMO la soluzione CSS è peggio.

In ogni caso, HTML5 include nuovamente questi attributi in modo che non vengano eliminati. Se è necessario continuare con <ol> s, rimango con gli attributi HTML start/value e utilizzare il DOCTYPE di transizione HTML4/XHTML1 o quello HTML5.

Answer 5

Non utilizzare un attributo per generare un valore numerico. Questo non è ciò per cui gli elementi dell'elenco sono e per usarlo in questo modo sta violando la semantica degli elementi. L'elemento ol è una lista ordinata. Ciò significa che gli elementi dell'elenco in quell'elenco hanno un valore di metadati enumerati che rappresenta un ordinamento opposto a un elenco non ordinato, che non ha enumerazione di meta-dati e pertanto è semplicemente una raccolta di elementi di elenco senza riguardo per la posizione di un elemento di elenco relativamente alle altre voci dell'elenco.

Quello che si sta tentando è una funzione di presentazione. HTML non è una lingua di presentazione. Usa dovrebbe usare i CSS:

#custom-item:before { 
    content: "35."; 
} 

Vedi questo articolo per ulteriori informazioni: http://www.alistapart.com/articles/taminglists/