Ändern Sie die Nummerierung in einer geordneten Liste?

Sie können die Nummer zu ändern, mit der eine geordnete Liste wie folgt beginnt:Ändern Sie die Nummerierung in einer geordneten Liste?

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

... aber ist es eine Möglichkeit, Listenelemente haben beliebige Zahlen zu machen, nicht nur fortlaufende Nummerierung?

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

Der einzige Weg, ich sehe es jetzt zu tun ist, jeden <li> in seinem eigenen <ol> zu wickeln, die offensichtlich nicht ideal ist. HTML-, Javascript- und CSS-Lösungen sind willkommen.

ps: wenn die Positionsnummern willkürlich sind, sind sie immer noch bestellt, so seien Sie nicht über die Semantik Reibverschleiß

Quelle

2009-06-15 nickf

ich eine 'Hacky' Lösung unter JavaScript-geschrieben habe, aber ich bin neugierig, warum wollen Sie tun etwas wie das? – Kirtan

Für Kreuzworträtsel Hinweise - Da die Down und Across Wörter in verschiedene Listen getrennt sind, sind die Zahlen nicht sequentiell. – nickf

Was hast du am Ende gemacht? – Benjol

Es gibt das value Attribut auf li, obwohl das veraltet ist:

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

Die w3schools page for <[email protected]> sagt:

Das Wert-Attribut des li-Elements war in HTML 4.01 veraltet und wird in XHTML 1.0 Strict DTD nicht unterstützt.

Hinweis: Zur Zeit gibt es keine CSS Alternative für das Wertattribut.

(trotz "Verwendung Stile" für die deprecation Warnung auf der Haupt <li> Seite sagen.)

Die HTML 5 editor's draft reference for li schlägt vor, es gibt nach wie vor gültig ist ...

Quelle

2009-06-15 07:06:00

Ja, "Wert" ist immer noch da, und es ist auch nicht mehr in HTML5 veraltet. –

In HTML 4.01 ist es ein veraltetes value Attribut auf <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>

Die nicht veraltete (CSS) Antwort ist (wie so oft) mo Re elegant, aber weniger ... direkt :) Die spec ist etwas trocken; Googeln taucht mehr sofort nutzbare Sachen wie this:

Genau wie die Nummerierung aus der vorherigen Liste fort Sie benötigen die CSS-Eigenschaft der richtige Zähler zum Erhöhen. Aber um es Start erhöhen von einem anderen Startpunkt können Sie einen optionalen zweiten Parameter in Counter-Reset-Eigenschaft einer Zahl übergeben. So starten von 5 würde etwas wie dies in Ihrem CSS aussehen:
ol.continue { 
    counter-reset: chapter 4;  /* Resets counter to 4. */ 
} 
Da der Zähler immer zurückgesetzt wird, bevor er erhöht wird, beginnen unsere Liste mit der Nummer 5 wir Satz haben der Zähler zu 4.

Quelle

2009-06-15 07:06:19 AakashM

so mit dieser CSS-Option, dass würde erfordern, dass nichtsequenzielle Elemente in ihre eigene OL eingeschlossen werden? – nickf

Das Beispiel ist nicht ganz relevant. Sie können die Regel für Ihre Zwecke in 'ol li.myclass' ändern. –

HTML5 erlaubt tatsächlich @value wieder, weil es ist Tatsächlich ist das kein Präsentationsattribut – Ms2ger

Wenn ich all diese Antworten ansehe, fühle ich mich ein bisschen eklig. Wollen Sie wirklich wirklich LIs dafür verwenden? Wenn es darum geht, "Dummy" -Lis oder JavaScript oder benutzerdefinierte CSS-Klassen zu erstellen, würde ich andere Möglichkeiten in Betracht ziehen. Der Punkt eines LI (meiner Meinung nach) verwaltet NICHT die Nummerierung selbst. Wenn Sie die Zahlen selbst verwalten müssen, dann verwenden Sie nur LI, um den Stil zu verwalten - wie wäre es mit der Erstellung Ihres eigenen Stils und dem bloßen Einkleben Ihrer Zahlen in einen Bereich von <?

Quelle

2009-06-15 07:07:10 Benjol

das ist eigentlich gar nicht so verrückt .... – nickf

@nickf Entschuldigung, ich habe meine Antwort geändert. Ich glaube, dass Ihr Kommentar noch gültig ist, aber Sie könnten nicht! – Benjol

Vielen Dank für die zusätzliche Zeit in dieser Frage. Sie machen einen guten Punkt - die Situation h etwas vom ursprünglichen semantischen Zweck der Verwendung einer Liste abweichen. Der Grund, warum ich vor allem einen OL verwenden möchte, ist die Leichtigkeit des Stylings. Alle Ränder sind eingerichtet und funktionieren. Dinge wie Listen-Stil-Position mit divs zu fusseln, ist nicht meine Vorstellung von Spaß. – nickf

Veraltete HTML Weise

<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>

Quelle

2009-06-15 07:07:23

Hinweis: "Value" Attribut wurde in HTML4 veraltet, aber in HTML5 wieder eingeführt. – BaSsGaz

Zum Beispiel -

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

Das ist etwas, was Sie tun können -

<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>

Referenz: HTML Help Forums.

Quelle

2009-06-15 07:09:18 Kirtan

Ich denke, das Problem von Semantik beginnt (Wich, wissen Sie, ist eine der Säulen der Erstellung von Standard-basierten Seiten): Sie wollen Liste ein bestellt verwenden eine ungeordnete ein darzustellen.

Meine Vorschläge:

1) ein ul Verwenden und fügen Sie Bilder mit Zahlen auf Klassen basieren (dies programmatisch durchgeführt werden kann und man nur die Anzahl Bilder einmal erzeugen muß, und es gibt Ihnen Styling-Optionen)

2) Verwenden Sie eine Definitionsliste. Ich kenne seine Stretching-Semantik ein wenig, aber wenn der "Term" (dt) "Horizontal" ist und die Definitionen (dd) die Optionen des Kreuzworträtsels sind, denke ich, dass es semantisch wird. Mit diesem können Sie die gewünschten Zahlen hinzufügen und sie mit dem gewünschten Tag formatieren.

Hoffe, das hilft.

Quelle

2009-06-15 08:59:49 jluna

Ich stimme nicht zu, dass die Liste ungeordnet ist. Es ist in aufsteigender Reihenfolge und der fünfte Punkt in der Liste ist das fünfte horizontale oder vertikale Wort im Puzzle. Es ist nur so, dass die Anzahl jedes Wortes nicht fortlaufend ist. – nickf

Mmmh ich hatte das ursprünglich nicht verstanden, also stehe ich richtig :) Ich habe über das Thema nachgedacht und ich denke mit einem

zu gehen wäre am "abbaubarsten". Es wäre semantisch stichhaltig und würde zeigen, dass der Inhalt für jeden Benutzeragenten oder Browser (JavaScript-fähig oder nicht) zugänglich und verständlich wäre ... der Nachteil ist, wenn die Liste manuell erzeugt wird. – jluna

Es ist eigentlich sogar einfacher als Sie denken. Was Sie tun, ist im Grunde "pausiert" eine Liste, so dass Sie etwas einfügen können. Wenn Sie dies im Text tun, verwenden Sie den Tag <div>. (Glocken klingeln jetzt?„)

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>

------ Ergebnisse --------- Text Text

Artikel 1
Artikel 2

Text Text Text

Artikel 3
Artikel 4

Text Text

Quelle

2010-10-04 18:56:54 SimTech

Das ist mehr als ein bisschen hacky, und löst nicht einmal das Problem (wo die Liste so gehen könnte: 'Item 2, Item 4, Item 9') – nickf

Semantisch ist das schlecht. – djskinner

Ändern Sie die Nummerierung in einer geordneten Liste?

Antwort

Verwandte Themen