Modificare la numerazione in un elenco ordinato?

È possibile modificare il numero in cui una lista ordinata inizia così:Modificare la numerazione in un elenco ordinato?

<ol start="3"> 
    <li>item three</li> 
    <li>item four</li> 
</ol>

... ma c'è un modo per rendere le voci di elenco hanno numeri arbitrari, non solo numerazione progressiva?

<ol> 
    <li>item two</li> 
    <li>item six</li> 
    <li>item nine</li> 
</ol>

L'unico modo che posso vedere per farlo è ora quello di avvolgere ogni <li> nella propria <ol> che ovviamente non è l'ideale. Le soluzioni HTML, Javascript e CSS sono benvenute.

ps: anche se i numeri sono arbitrari, sono ancora in ordine, in modo da non essere preoccuparsi riguardo alla semantica

fonte

2009-06-15 nickf

ho postato un 'hacky' javascript soluzione qui di seguito, ma, io sono curioso, perché vuoi fare qualcosa come questo? – Kirtan

Per gli indizi di parole crociate - poiché le parole Giù e Attraverso sono separate in elenchi diversi, i numeri non sono sequenziali. – nickf

Quindi cosa hai fatto alla fine? – Benjol

C'è l'attributo value su li, anche se questo è deprecato:

<ol> 
    <li value="2">item two</li> 
    <li value="6">item six</li> 
    <li value="9">item nine</li> 
</ol>

il w3schools page for <[email protected]> dice:

l'attributo valore dell'elemento Li era obsoleto in HTML 4.01 ed è non supportato nella DTD XHTML 1.0 Strict.

Nota: Al momento, non v'è alcun CSS alternativa per l'attributo value.

(nonostante dicendo "utilizzare gli stili" per l'avvertimento deprecazione sulla principale <li> pagina.)

Il HTML 5 editor's draft reference for li suggerisce che è ancora valido lì ...

fonte

2009-06-15 07:06:00

Sì, 'valore' è ancora lì, e non è più obsoleto in HTML5. –

In HTML 4.01 c'è un value attributo deprecato on <li>:

<ol> 
<li value="30"> makes this list item number 30. 
<li value="40"> makes this list item number 40. 
<li> makes this list item number 41. 
</ol>

La non-deprecato (CSS) risposta è (come spesso accade) mo re elegante ma meno ... diretto :) Il spec è un po 'secco; googling salta fuori più immediatamente fruibile roba come this:

Proprio come continuare la numerazione dalla lista precedente è necessario impostare la proprietà CSS per incrementare la corretta contatore. Ma per fare in modo che inizi ad incrementare da un diverso punto di partenza , è possibile passare un secondo parametro opzionale nella proprietà contatore-reset di un numero pari a . Così a partire dal 5 apparirebbe qualcosa come questo nel CSS:
ol.continue { 
    counter-reset: chapter 4;  /* Resets counter to 4. */ 
} 
Dal momento che il contatore sarà sempre essere azzerato prima di essere incrementato, per iniziare la nostra lista con il numero 5 dovremo set il contatore a 4.

fonte

2009-06-15 07:06:19 AakashM

quindi con quell'opzione CSS, che richiederebbe che gli articoli non sequenziali vengano impacchettati nel proprio OL? – nickf

L'esempio non è del tutto pertinente. Puoi modificare la regola in 'ol li.myclass' per i tuoi scopi. –

HTML5 consente di nuovo @value, perché è in realtà non è un attributo presentazionale – Ms2ger

Guardare tutte queste risposte mi fa sentire un po 'icky. Vuoi davvero usare LI per questo? Se ciò significa creare lis "dummy", javascript o CSS personalizzati, inizierei a considerare altre possibilità. Il punto di una LI (a mio avviso) NON è la gestione della numerazione da soli. Se devi gestire i numeri da solo, allora stai utilizzando solo LI per gestire lo stile: come creare il tuo stile e semplicemente incollare i tuoi numeri in uno spas> < o qualcosa del genere?

fonte

2009-06-15 07:07:10 Benjol

che in realtà non è così folle .... – nickf

@nickf , scusa ho cambiato la mia risposta, credo che il tuo commento sia ancora valido, ma potresti non farlo! – Benjol

grazie per aver dedicato del tempo extra a questa domanda. come leggermente diverso dallo scopo semantico originale di usare una lista. La ragione per cui in particolare voglio usare un OL, è per la semplicità dello stile. Tutti i margini sono impostati e funzionanti. Schiacciare cose come la posizione in stile lista usando div non è la mia idea di divertimento. – nickf

obsolete HTML modo

<ol> 
    <li>List item 1</li> 
    <li VALUE=5 TYPE="A">List item E</li> 
    <li>List item 3</li> 
</ol>

CSS way

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<style type="text/css"> 
ol { 
    counter-reset:item; 
} 
li { 
    display:block; 
} 
li:before { 
    content:counter(item) '. '; 
    counter-increment:item; 
} 
#new_number { 
    counter-reset:item 24; 
} 
</style> 

<!--[if IE]> 
<script type="text/javascript"> 
window.onload=function() { 
    document.getElementById('new_number').value='25'; 
} 
</script> 
<![endif]--> 

</head> 
<body> 

<ol> 
    <li id="new_number">list item</li> 
    <li>list item</li> 
    <li>list item</li> 
    <li>list item</li> 
    <li>list item</li> 
    <li>list item</li> 
</ol> 

</body> 
</html>

fonte

2009-06-15 07:07:23

Nota: l'attributo 'value' era deprecato in HTML4, ma reintrodotto in HTML5. – BaSsGaz

Per esempio -

<ol id="reverse_numbering"> 
    <li>foo</li> 
    <li>bar</li> 
    <li>baz</li> 
</ol>

Questo è qualcosa che si può fare -

<script type="text/javascript"> 
    var reverse = $('reverse_numbering'); 
    reverse.style.listStyle='none'; 
    var li = reverse.getElementsByTagName('li'); 
    for(var i=0; i<li.length; i++) { 
     li[i].insertBefore(document.createTextNode(li.length-i+'. '), li[i].firstChild); 
    } 
</script>

Riferimento: HTML Help Forums.

fonte

2009-06-15 07:09:18 Kirtan

penso che questo problema inizia da semantica (Wich, si sa, è uno dei pilastri per la creazione di pagine standard-based): Si desidera utilizzare una lista ordinata per rappresentare un non ordinata uno.

I miei suggerimenti:

1) Utilizzare un ul e aggiungere le immagini con i numeri basati su classi (questo può essere fatto programatically e hai solo per generare le immagini numero una volta, più ti dà opzioni di stile)

2) Utilizzare un elenco di definizioni. Conosco la sua semantica di stretching un po 'ma se il "termine" (dt) è "Orizzontale" e le definizioni (dd) sono le opzioni del cruciverba, penso che diventi semantico. Usando questo puoi aggiungere i numeri che vuoi e modellarli usando qualunque etichetta tu voglia.

Spero che questo aiuti.

fonte

2009-06-15 08:59:49 jluna

Non sono d'accordo sul fatto che l'elenco non sia ordinato. È in ordine ascendente e il quinto elemento nell'elenco è la quinta parola orizzontale o verticale nel puzzle. È solo che il numero di ogni parola non è consecutivo. – nickf

Mmmh non l'avevo capito in modo originale quindi sono corretto :) Continuavo a pensare al problema e penso che andare con uno

sarebbe il più "degradabile". Sarebbe semanticamente valido e mostrerebbe il contenuto sarebbe accessibile e comprensibile a qualsiasi agente utente o browser (javascript in grado o meno) ... lo svantaggio è se l'elenco viene generato manualmente. – jluna

In realtà è ancora più facile di quanto si pensi. Quello che stai facendo è fondamentalmente "mettere in pausa" un elenco in modo da poter inserire qualcosa. Quando lo fai nel testo, usi il tag <div>. (Le campane stanno suonando adesso?")

CSS

...<br /> 

/* This style removes the indentation that &lt;ol&gt; creates. In my document it was 30pt */<br /> 
.pauselist {margin-left:-30pt;} 
<br /> 
<br /> 
XHTML<br /> 
...<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
&lt;ol&gt;<br /> 
    &lt;li&gt;Item 1&lt;/li&gt;<br /> 
    &lt;li&gt;Item 2<br /> 
    &lt;div class="pauselist"&gt;<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
&lt;!-- Okay now let's continue with the list --&gt;<br /> 
    &lt;/div&gt;<br /> 
    &lt;/li&gt;<br /> 
    &lt;li&gt;Item 3&lt;/li&gt;<br /> 
    &lt;li&gt;Item 4&lt;/li&gt;<br /> 
&lt;/ol&gt;<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
&lt;p&gt;Text&lt;/p&gt;<br /> 
<br /> 
<pre>

------ Risultati --------- testo Testo

Articolo 1
Articolo 2

testo testo testo

Articolo 3
Articolo 4

Testo Testo

fonte

2010-10-04 18:56:54 SimTech

Questo è più che un po 'hacky, e non risolve nemmeno il problema (dove la lista potrebbe andare in questo modo: 'Articolo 2, Articolo 4, Articolo 9') – nickf

Semanticamente questo è scarso. – djskinner

Modificare la numerazione in un elenco ordinato?

risposta

Problemi correlati