Kann eine geordnete Liste mit CSS ein Ergebnis liefern, das wie 1.1, 1.2, 1.3 (statt nur 1, 2, 3,…) aussieht?

201

Kann eine geordnete Liste mit CSS Ergebnisse liefern, die wie 1.1, 1.2, 1.3 (statt nur 1, 2, 3, ...) aussehen? Bisher list-style-type:decimalhat die Verwendung nur 1, 2, 3, nicht 1.1, 1.2., 1.3 ergeben.

html css Richard77
quelle
Ich würde vorschlagen, die akzeptierte Antwort mit der von Jakub Jirutka zu vergleichen. Ich denke, letzteres ist noch viel besser.
Frank Conijn
Elegante Lösung. Irgendeine Idee, warum Wikipedia stattdessen eine ul für seine Inhaltsabschnitte verwendet?
Mattypants
1
@davnicwil Ich stimme zu; Es sieht so aus, als hätte ich das Duplikat wahrscheinlich erst im September in der falschen Reihenfolge angewendet.
TylerH
Cool, jetzt fühle ich mich unbehaglich, da es mir nie in den Sinn gekommen ist. Es könnte ein einfacher Fehler wie dieser sein - Entschuldigung!
Davnicwil

Antworten:

289

Sie können dazu Zähler verwenden:

Die folgenden Stylesheet-Nummern verschachtelten Listenelemente als "1", "1.1", "1.1.1" usw.

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

Beispiel 

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
Erweitern Sie das Snippet

Weitere Informationen finden Sie unter Verschachtelte Zähler und Bereich .

Gumbo
quelle
2
gute Antwort. Was ist die Unterstützung dafür?
Jason McCreary
1
@ Jason McCreary: Nun, das ist der Nachteil: Zähler werden im IE erst in Version 8 unterstützt .
Gumbo
3
Bei dieser Lösung fehlt eine winzige Sache: der Punkt nach der Artikelnummer. Es sieht nicht wie der Standardlistenstil aus. Behebung durch Hinzufügen eines Punktes zur Regel für li:before: content: counters(item, ".")". ";
LS
4
Dies ist eine schlechte Antwort. Es funktioniert nicht richtig. Schauen Sie sich die Antwort von Jakub Jirutka unten an
Mr Pablo
1
@ Gumbo Ich weiß, und die Antwort von Jakub gab mir die richtige Nummerierung.
Herr Pablo
235

Keine der Lösungen auf dieser Seite funktioniert korrekt und universell für alle Ebenen und langen (umschlossenen) Absätze. Aufgrund der variablen Größe des Markers (1., 1.2, 1.10, 1.10.5,…) ist es wirklich schwierig, eine konsistente Einrückung zu erzielen. Es kann nicht einfach „gefälscht“ werden, auch nicht mit einem vorberechneten Rand / Abstand für jede mögliche Einrückungsstufe.

Ich habe endlich eine Lösung gefunden, die tatsächlich funktioniert und kein JavaScript benötigt.

Es wurde auf Firefox 32, Chromium 37, IE 9 und Android Browser getestet. Funktioniert nicht mit IE 7 und früheren Versionen.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Beispiel: Beispiel

Probieren Sie es auf JSFiddle aus , geben Sie es auf Gist .

Jakub Jirutka
quelle
1
Gute Arbeit beim Erreichen dieser Art von Einrückung. Ich würde jedoch immer noch argumentieren, dass die ersten beiden Fälle von Einrückungen, die Sie aufgelistet haben, eher eine Frage der Präferenz als der richtigen und der falschen sind. Betrachten Sie Fall 1 und Fall 2 - letzterer schafft es, viel mehr Ebenen einzudrücken, bevor der Abstand unhandlich wird, während er immer noch ziemlich ordentlich aussieht. Darüber hinaus verwenden sowohl MS Word als auch das Standard-Browser-Styling die Einrückung von Fall 2. Ich denke, sie machen es auch falsch?
Saul Fautley
2
@ saul-fautley Es ist falsch in Bezug auf Typografie. Ihr Beispiel mit einer wahnsinnigen Anzahl verschachtelter Ebenen zeigt, dass die verschachtelte Nummerierung nicht für zu viele Ebenen geeignet ist, aber das ist ziemlich offensichtlich. MS Words ist kein Satzsystem, sondern lediglich ein Dokumentenprozessor mit schlechter Typografie. Standard-Browser-Styling… oh, Sie wissen nicht viel über Typografie, oder?
Jakub Jirutka
3
Es funktioniert wirklich (technisch) für alle Ebenen und langen Absätze. Wenn es sinnvoll ist, ein Dutzend Ebenen zu verwenden, ist dies eine weitere Frage, die nichts mit der technischen Lösung zu tun hat. Der Punkt ist, dass Sie nicht wie bei einigen anderen Lösungen eine CSS-Regel für jede Verschachtelungsebene vordefinieren müssen.
Jakub Jirutka
4
Während ich nicht sagen würde, dass irgendetwas mit den anderen Antworten von Natur aus "falsch" ist, würde ich sagen, dass sie unvollständig sind. Diese Antwort ist genau richtig und hat sogar in einer schrecklich bizarr gestalteten Site funktioniert, die ich gerade ändere.
DanielM
2
@tremby: Die Diskrepanz kann behoben werden, indem li "display: table-row" anstelle von "display: table" verwendet. Das Problem dabei ist, dass das li dann keine Ränder / Auffüllungen verwenden kann, da Tabellenzeilen immer automatisch nach ihrem Inhalt dimensioniert werden. Dies kann umgangen werden, indem ein "li: after" mit "display: block" hinzugefügt wird. Ein vollständiges Beispiel finden Sie unter jsFiddle . Als zusätzlichen Bonus habe ich "text-align: right" zu "li: before" hinzugefügt, um die Zahlen richtig auszurichten.
mmlr
64

Die gewählte Antwort ist ein guter Anfang, erzwingt jedoch im Wesentlichen das list-style-position: inside;Stylen der Listenelemente, wodurch umbrochener Text schwer lesbar wird. Hier ist eine einfache Problemumgehung, mit der Sie auch den Abstand zwischen Nummer und Text steuern und die Nummer gemäß dem Standardverhalten nach rechts ausrichten können.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

Saul Fautley
quelle
Ein Nachteil ist, dass am Ende jedes Listenelements ein Punkt eingefügt wird.
Davin Studer
3
@ David Studer: Gemäß dem Standardverhalten wird am Ende jeder Zahl nur ein Punkt hinzugefügt ol. Es kann leicht entfernt werden, indem das letzte "."aus der contentEigenschaft gelöscht wird , aber das sieht für mich nur ein bisschen seltsam aus.
Saul Fautley
14

Die hier veröffentlichten Lösungen haben bei mir nicht gut funktioniert, daher habe ich eine Mischung aus diesen und der folgenden Frage erstellt: Ist es möglich, eine mehrstufige geordnete Liste in HTML zu erstellen?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

Ergebnis:

Bildschirmfoto

Hinweis: Der Screenshot, wenn Sie den Quellcode oder was auch immer aus diesem Beitrag sehen möchten: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

Chelder
quelle
1
Dies ist die beste (und einfachste) Antwort auf der gesamten Seite.
Bruno Toffolo
6

Hinweis: Verwenden Sie CSS , um eine verschachtelte Nummerierung in einem modernen Browser zu erstellen. Siehe die akzeptierte Antwort. Das Folgende ist nur für historisches Interesse.counters

Wenn der Browser contentund unterstützt counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}
<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>
Erweitern Sie das Snippet

kennytm
quelle
Diese Lösung schlägt schrecklich fehl, wenn die Listen verschachtelt sind.
LS
@LS Sie können die Selektoren jederzeit an Ihre Bedürfnisse anpassen. .foo > ol > li.
Kennytm
1
Mein Punkt ist, dass Sie "1" fest codiert haben. in den Stil. Was passiert, wenn die Unterliste ein untergeordnetes Element des zweiten Elements in der übergeordneten Liste ist? Sie möchten, dass es als "2" angezeigt wird, aber es wird immer "1" sein. wegen der Art und Weise, wie es hier codiert ist. Was ist die Lösung? Neue Stilsätze für jede mögliche Zahl erstellen? Nein. Verwenden Sie die counters()Funktion wie in den obigen Beispielen anstelle der counter()Funktion.
LS
2 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

Ergebnis: http://i.stack.imgur.com/78bN8.jpg

KingRider
quelle
2

Ich habe ein Problem, wenn es zwei Listen gibt und die zweite in DIV ist. Die zweite Liste sollte bei 1 beginnen, nicht bei 2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

EDIT: Ich habe das Problem durch diese http://jsfiddle.net/hy5f6161/ gelöst.

Robertad
quelle
1

In naher Zukunft können Sie möglicherweise das ::markerPseudo-Element verwenden , um das gleiche Ergebnis wie bei anderen Lösungen in nur einer Codezeile zu erzielen.

Denken Sie daran, die Browserkompatibilitätstabelle zu überprüfen, da dies noch eine experimentelle Technologie ist. Im Moment, in dem nur Firefox und Firefox für Android ab Version 68 geschrieben werden, wird dies unterstützt.

Hier ist ein Snippet, das korrekt gerendert wird, wenn es in einem kompatiblen Browser versucht wird: 

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
Erweitern Sie das Snippet

Vielleicht möchten Sie auch diesen großartigen Artikel lesen, indem Sie das Magazin zu diesem Thema zerschlagen .

Tyrion
quelle
0

Ich musste dies zu der in 12 veröffentlichten Lösung hinzufügen, da ich eine Liste mit einer Mischung aus geordneten Listen- und ungeordneten Listenkomponenten verwendete. Inhalt: no-close-quote scheint eine seltsame Sache zu sein, ich weiß, aber es funktioniert ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}
benjarlett
quelle
0

Folgendes hat bei mir funktioniert:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

Schauen Sie sich an: http://jsfiddle.net/rLebz84u/2/

oder dieses http://jsfiddle.net/rLebz84u/3/ mit mehr und gerechtfertigtem Text

willy wonka
quelle
Zeitverschwendung zum Anschauen. Fast identisch mit einer früheren Antwort. Der einzige Unterschied ist, dass ")" am Ende des Markers hinzugefügt wurde.
Juanitogan
0

Dies ist der richtige Code, wenn Sie zuerst die Größe eines anderen CSS ändern möchten.

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

in HTML-Datei.

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>
Sandeep Kumar
quelle