Ist es möglich, eine Startnummer für eine geordnete Liste anzugeben?

114

Ich habe eine geordnete Liste, in der die ursprüngliche Nummer 6 sein soll. Ich habe festgestellt, dass dies in HTML 4.01 unterstützt (jetzt veraltet) wird. In dieser Spezifikation heißt es, dass Sie die Start-Ganzzahl mithilfe von CSS angeben können. (anstelle des startAttributs)

Wie würden Sie die Startnummer mit CSS angeben?

html css html-lists

— vrish88
quelle

147

Wenn Sie die Funktionalität benötigen, um eine geordnete Liste (OL) an einem bestimmten Punkt zu starten, müssen Sie Ihren Doctype als HTML 5 angeben. welches ist:

<!doctype html>

Mit diesem Doctype ist es gültig, ein startAttribut für eine geordnete Liste festzulegen . Sowie:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

Erweitern Sie das Snippet

— Travis
quelle

7

ist das noch richtig?

— antony.trupe

3

Diese Antwort ist mit HTML5 korrekt, ja.

— Travis

Das Startattribut funktioniert auch für ungeordnete (<ul>) Listen wie: <ul style = "list-style-type: lower-roman;" start = "4"> und beginnt die Liste mit 'iv' oder <ul style = "Listenstil-Typ: Upper-Alpha;" start = "4"> beginnend mit 'D'

— Matthew Cox

66

<ol start="">ist in HTML5 nicht mehr veraltet , daher würde ich es einfach weiter verwenden, unabhängig davon, was HTML4.01 sagt.

— Ms2ger
quelle

32

start="number" saugt, weil es sich nicht automatisch basierend auf der Nummerierung davor ändert.

Eine andere Möglichkeit, dies zu tun, die möglicherweise komplizierteren Anforderungen entspricht, ist die Verwendung von counter-resetundcounter-increment .

Problem

Angenommen, Sie wollten so etwas:

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Sie können start="3"den dritten lides zweiten einstellen ol, aber jetzt müssen Sie ihn jedes Mal ändern, wenn Sie dem ersten einen Artikel hinzufügenol

Lösung

Lassen Sie uns zunächst die Formatierung unserer aktuellen Nummerierung löschen.

ol {
  list-style: none;
}

Wir werden jeden li den Zähler zeigen lassen

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

Jetzt müssen wir nur noch sicherstellen, dass der Zähler nur beim ersten olstatt bei jedem zurückgesetzt wird.

ol:first-of-type {
  counter-reset: mycounter;
}

Demo

http://codepen.io/ajkochanowicz/pen/mJeNwY

Jetzt kann ich so viele Elemente zu jeder Liste hinzufügen, dass die Nummerierung erhalten bleibt.

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

— Adam Grant
quelle

Sie können auch Ihre eigenen Nummern explizit angeben: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}sollte sein ol li:before {...} - sonst ist dies die perfekte Lösung, danke!

— Davor

15

Ich bin überrascht, dass ich in diesem Thread keine Antwort finden konnte.

Ich habe diese Quelle gefunden , die ich unten zusammengefasst habe:

Um das Startattribut für eine geordnete Liste mithilfe von CSS anstelle von HTML festzulegen, können Sie die counter-incrementEigenschaft wie folgt verwenden:

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-incrementscheint 0-indiziert zu sein. Um eine Liste zu erhalten, die bei 4 beginnt, verwenden Sie 3.

Für den folgenden HTML

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

Mein Ergebnis ist

d) Buy milk
e) Feed the dog
f) Drink coffee

Schau dir meine Geige an

Siehe auch die W3-Wiki-Referenz

— hcmcf
quelle

1

Gute Antwort. Das war ein Lebensretter, danke.

— Andrea

9

Wie andere vorgeschlagen haben, kann man das startAttribut des olElements verwenden.

Alternativ kann man das valueAttribut des liElements verwenden. Beide Attribute sind in HTML 4.01 als veraltet markiert , nicht jedoch in HTML 5 (ol und li) .

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

Erweitern Sie das Snippet

— Andrey
quelle

1

Um die Nummerierung einer geordneten Liste bei einer Nummer zu starten, die vom Standardwert ("1") abweicht, ist das startAttribut erforderlich . Dieses Attribut war in der HTML 4.01-Spezifikation zulässig (nicht veraltet) (HTML 4.01 war zum Zeitpunkt der Veröffentlichung dieser Frage noch keine "ersetzte Spezifikation") und ist in der aktuellen HTML 5.2-Spezifikation weiterhin zulässig . Das olElement hatte auch ein optionales startAttribut in der Übergangs-DTD von XHTML 1.0, jedoch nicht in der strengen DTD von XHTML 1.0 (suchen Sie nach der Zeichenfolge ATTLIST olund überprüfen Sie die Attributliste). Trotz einiger älterer Kommentare wurde das startAttribut nicht verworfen . Vielmehr war es ungültigin den strengen DTDs von HTML 4.01 und XHTML 1.0. Trotz der Behauptungen in einem der Kommentare ist das startAttribut auf dem nicht zulässigul Element und funktioniert derzeit nicht in Firefox und Chromium.

Beachten Sie auch, dass ein Tausendertrennzeichen nicht funktioniert (in aktuellen Versionen von Firefox und Chromium). Im folgenden Codeausschnitt 10.000wird interpretiert als 10; Gleiches gilt für 10,000. Verwenden Sie daher nicht den folgenden counterWertetyp:

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Was Sie also verwenden sollten, ist Folgendes (in den seltenen Fällen, in denen Werte über 1000 überhaupt erforderlich sind):

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Einige der anderen Antworten schlagen die Verwendung der CSS-Eigenschaft vor counter, dies widerspricht jedoch der herkömmlichen Trennung von Inhalt und Layout (in HTML bzw. CSS). Benutzer mit bestimmten Sehbehinderungen verwenden möglicherweise ihre eigenen Stylesheets, counterwodurch die Werte möglicherweise verloren gehen. Die Unterstützung von Bildschirmleseprogrammen für countersollte ebenfalls getestet werden. Die Unterstützung von Screenreadern für Inhalte in CSS ist eine relativ neue Funktion, und das Verhalten ist nicht unbedingt konsistent. Siehe Screenreader und CSS: Gehen wir aus der Mode (und in den Inhalt)? von John Northup im WebAIM-Blog (August 2017).

— Tsundoku
quelle

0

Wenn die Listen verschachtelt sind, muss es eine Behandlung geben, bei der die verschachtelten Listenelemente weggelassen werden. Dies habe ich erreicht, indem ich überprüft habe, dass das übergeordnete Element kein Listenelement ist.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Erweitern Sie das Snippet

— LoonyNoob
quelle

0

Mit CSS ist es etwas schwierig, den Fall zu behandeln, dass verschachtelte Listenelemente vorhanden sind. Daher erhält nur die erste Listenebene die benutzerdefinierte Nummerierung, die nicht bei jeder neu geordneten Liste unterbrochen wird. Ich verwende den CSS-Kombinator '>', um die möglichen Pfade zu den Listenelementen zu definieren, die eine benutzerdefinierte Nummerierung erhalten sollen. Siehe https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Erweitern Sie das Snippet

— LoonyNoob
quelle

-1

Offensichtlich kann weder @start einer geordneten Liste <ol> noch @value eines Listenelements <li> über CSS festgelegt werden. Sehen https://www.w3schools.com/css/css_list.asp

Das Ersetzen der Nummerierung durch einen Zähler in CSS scheint die beste / schnellste / narrensichere Lösung zu sein, und es gibt andere, die dafür werben, z. B. https://css-tricks.com/numbering-in-style/

Mit reinem JavaScript ist es möglich, @value für jedes Listenelement festzulegen, dies ist jedoch natürlich langsamer als CSS. Es muss nicht einmal überprüft werden, ob das Listenelement zu einer geordneten Liste <ol> gehört, da ungeordnete Listen automatisch weggelassen werden.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

Erweitern Sie das Snippet

— LoonyNoob
quelle