HTML geordnete Liste 1.1, 1.2 (verschachtelte Zähler und Bereich) funktioniert nicht

87

Ich verwende verschachtelte Zähler und Bereiche, um eine geordnete Liste zu erstellen:

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

Erweitern Sie das Snippet

Ich erwarte folgendes Ergebnis:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Stattdessen sehe ich Folgendes (falsche Nummerierung) :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

Ich habe keine Ahnung, sieht jemand, wo es schief geht?

Hier ist eine JSFiddle: http://jsfiddle.net/qGCUk/2/

html css html-lists Dolch
quelle

101

Deaktivieren Sie "CSS normalisieren" - http://jsfiddle.net/qGCUk/3/. Der dabei verwendete CSS-Reset setzt standardmäßig alle Listenränder und Auffüllungen auf 0

UPDATE http://jsfiddle.net/qGCUk/4/ - Sie müssen Ihre Unterlisten in Ihre Hauptliste aufnehmen<li>

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Erweitern Sie das Snippet

Zoltan Toth
quelle

2

Wie werden die Indizes mit point - like 1.> 1.1. 1.2. 1.3.und so weiter verfolgt?

URL87

2

Stellen Sie nur sicher, dass Sie die CSS-Selektoren korrigieren, damit sie keine Auswirkungen auf Navigationslisten haben.

Okomikeruko

@Okomikeruko Was bedeutet es, "die CSS-Selektoren zu reparieren"? Weil ich genau das Problem habe, auf das Sie angespielt haben - dieser Trick wirkt sich nicht nur auf die nummerierte Liste aus, für die ich ihn verwenden möchte, sondern auch auf die anderen Listen in meinem HTML. : - \ Nevermind: Moshe Simantovs Antwort behebt das. :)

antred

1

@antred Elementattribute wie idund classermöglichen es Ihnen, CSS spezifisch für diese Elemente mit Selektoren zu definieren. Wenn Sie eine Decke verwenden li, ul, oletc, dann wirkt sich die CSS alle Instanzen davon. Wenn Sie jedoch Ihr Element auf <ol class="cleared">und Ihren CSS-Selektor auf einstellen ol.cleared, werden andere olElemente nicht unnötig beeinflusst.

Okomikeruko

61

Verwenden Sie diesen Stil, um nur die verschachtelten Listen zu ändern:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

Moshe Simantov
quelle

2

Toll! Für mich sofort funktioniert! Toda.

yO_

3

Dies ist die beste Antwort, da es auch die erste Ebene mit einem Punkt gibt und den Inhalt einfügt.

Martin Eckleben

Wenn ich font-weight: boldzu ol ol > li:beforeden Zählern der verschachtelten Liste hinzufüge bold, werden die Zähler der Liste der ersten Ebene nicht erstellt bold?

Sushmit Sagar

14

Überprüfen Sie dies heraus:

http://jsfiddle.net/PTbGc/

Ihr Problem scheint behoben worden zu sein.

Was zeigt sich für mich (unter Chrome und Mac OS X)

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Wie ich es gemacht habe

Anstatt :

<li>Item 1</li>
<li>Item 2</li>
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>

Machen :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>

Dr.Kameleon
quelle

7

Dies ist eine großartige Lösung! Mit ein paar zusätzlichen CSS-Regeln können Sie es wie eine MS Word-Gliederungsliste mit einem hängenden Einzug in der ersten Zeile formatieren:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}

ChaosFreak
quelle

1

Das Problem bei diesem Ansatz ist, dass Sie die Listennummern nicht kopieren können. Wenn Sie also eine riesige Liste kopieren, wird sie ohne Zahlen sein

Rohit

1

Ich bin kürzlich auf ein ähnliches Problem gestoßen. Der Fix besteht darin, die Anzeigeeigenschaft der li-Elemente in der geordneten Liste auf Listenelement und nicht auf Anzeigeblock zu setzen und sicherzustellen, dass die Anzeigeeigenschaft von ol kein Listenelement ist. dh

li { display: list-item;}

Damit sieht der HTML-Parser alle li als Listenelement und weist ihm den entsprechenden Wert zu, und sieht das ol als Inline-Block oder Blockelement basierend auf Ihren Einstellungen und versucht nicht, einen Zählwert zuzuweisen es.

Babatunde Calebs
quelle

Dies dupliziert die Nummerierung.

TylerH

0

Moshes Lösung ist großartig, aber das Problem kann immer noch bestehen, wenn Sie die Liste in a einfügen müssen div. (Lesen Sie: CSS-Counter-Reset auf verschachtelter Liste )

Dieser Stil könnte dieses Problem verhindern:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
  </ol>
</div>

Erweitern Sie das Snippet

Sie können auch den Zähler zurücksetzen li:before.

saboshi69
quelle

Was ist, wenn ich nicht das Trailing .in der verschachtelten Liste, sondern die Stammliste haben möchte ?

Sushmit Sagar

0

Nachdem ich andere Antworten durchgesehen hatte, kam ich auf diese Idee. Wende einfach die Klasse nested-counter-listauf root anol Tag an:

Sass-Code:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

CSS-Code :

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Erweitern Sie das Snippet

Und wenn Sie .am Ende der Zähler der verschachtelten Liste ein Trailing benötigen, verwenden Sie Folgendes :

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Erweitern Sie das Snippet

Sushmit Sagar
quelle

HTML geordnete Liste 1.1, 1.2 (verschachtelte Zähler und Bereich) funktioniert nicht

Antworten:

Wie ich es gemacht habe