Wie kann der Einzug für die zweite Zeile in geordneten Listen über CSS beibehalten werden?

260

Ich möchte eine "Insider" -Liste mit Listenaufzählungszeichen oder Dezimalzahlen, die alle mit übergeordneten Textblöcken bündig sind. Zweite Zeilen von Listeneinträgen müssen den gleichen Einzug wie die erste Zeile haben!

Z.B:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS bietet nur zwei Werte für seine "Listenstilposition" - innen und außen. Mit "innen" sind zweite Zeilen bündig mit den Listenpunkten, nicht mit der übergeordneten Zeile:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

Breite "außerhalb" meiner Liste ist nicht mehr bündig mit übergeordneten Textblöcken.

Experimente mit Texteinzug, Auffüllen nach links und Rand nach links funktionieren für ungeordnete Listen, schlagen jedoch für geordnete Listen fehl, da dies von der Anzahl der Zeichen der Listendezimalzahl abhängt:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." und "12." sind nicht bündig mit dem übergeordneten Textblock im Vergleich zu "3". und "4.".

Wo ist also das Geheimnis über geordnete Listen und den Einzug in der zweiten Zeile? Danke für deinen Einsatz!

html  css  html-lists 
— kernfrucht
quelle
1
Benutzer Pali Madra fügte dies als Antwort hinzu, es wurde jedoch gelöscht, da es keine weitere Erklärung enthielt. Er sagte, die jsfiddle könnte das sein, wonach Sie suchen: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
Versuchen Sie, die Polsterung nur links
— einzustellen
3
Falls jemand auf diese Frage stößt, der nur nach "grundlegender Listeneinrückung" sucht, werfen Sie einen Blick auf diese Frage ( stackoverflow.com/questions/17556496/… ) und die Antwort von Natasha Banegas.
— SunnyRed
Keine einzige Antwort spricht die eigentliche Frage an. Die eigentliche Frage ist, wie die Ziffern in der Liste linksbündig ausgerichtet werden, während der Text des Listenelements separat linksbündig mit dem darüber liegenden Elementtext ausgerichtet wird, wenn dieser Text in eine zweite oder nachfolgende Zeile überläuft. Standardmäßig - und in fast jeder Antwort - sind die Ziffern der Liste rechtsbündig und der Text der Listenelemente linksbündig.
— Jessie Westlake

Antworten:

267

Aktualisieren

Diese Antwort ist veraltet. Sie können dies viel einfacher tun, wie in einer anderen Antwort unten ausgeführt:

ul {
  list-style-position: outside;
}

Siehe https://www.w3schools.com/cssref/pr_list-style-position.asp

Ursprüngliche Antwort

Ich bin überrascht zu sehen, dass dies noch nicht gelöst wurde. Sie können den Tabellenlayout-Algorithmus des Browsers (ohne Verwendung von Tabellen) wie folgt verwenden:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

Geben Sie hier die Bildbeschreibung ein

Verwenden Sie die Legacy- :beforeNotation mit einem Doppelpunkt, damit es in IE8 funktioniert .

— user123444555621
quelle
2
@Perelli fooist nur eine zufällige Zeichenfolge (id) wird verwendet , um die zu verbinden counter-reset, counter-incrementund counter()Eigenschaften.
— user123444555621
3
Sie können das Wonky-Table-Zeug auch vermeiden, indem Sie position: relativeden <li>und position: absoluteden generierten Inhalt verwenden. Ein Beispiel finden Sie unter jsfiddle.net/maryisdead/kgr4k .
— Maryisdead
2
@ Maryisdead Warum 40px? Das wird kaputt gehen, wenn die Zähler breiter sind . Der springende Punkt bei der Verwendung des Tabellenlayouts ist, dass der Browser automatisch zum Inhalt passt.
— user123444555621
5
Schön, aber wie kontrollieren Sie den unteren Rand? Die Höhe des <li> wird ausschließlich durch die Höhe der darin enthaltenen Tabellenzellenelemente bestimmt. Daher haben Rand, Polsterung und Höhe dieser Elemente keine Auswirkung. Wie kann man diese Einschränkung umgehen?
— hschmieder
3
Wenn Sie mehrzeilige Listenelemente haben und einen konsistenten vertikalen Abstand benötigen, besteht die Lösung darin, dem alten Selektor einen vertikalen Randabstand hinzuzufügen, z. B. Randabstand: 0 3px; Das normale Auffüllen der Tabellenzelle funktioniert nicht, da die Zahl immer nur aus einer Zeile besteht.
— RemBem
207

Ich glaube, das wird das tun, wonach Sie suchen.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

Geben Sie hier die Bildbeschreibung ein

— JTOrlando
quelle
21
besser, wenn Sie auch padding-left hinzufügen: 1em;
— Bence Gacsályi
16
Dies ist bei weitem die beste Antwort aller Lösungen auf dieser Seite. Es ist viel bequemer als andere. Wenn Sie zögern, welche Antwort Sie wählen sollen, wählen Sie diese aus.
— Valentin Mercier
25
@loremmonkey Das ist schnell und schmutzig, aber keine echte Lösung. Erstens, 1ementspricht nicht dem Leerzeichen des Einzugs. Die Linien werden pixelweise nicht perfekt ausgerichtet. Zweitens, was ist, wenn die Liste die Nummer 10 erreicht? 100? Der Texteinzug funktioniert nicht, er wird nicht ausgerichtet. Diese Antwort sollte abgelehnt werden.
— Sunny
1
@Sunny Es ist eine Disc-Liste, keine nummerierte. Warum also bis 100 zählen? Ich sehe überhaupt keine Probleme mit meinen Listen, die den obigen Code verwenden.
— Lorem Affe
2
@loremmonkey Der Einzug ist nicht 1em. oi60.tinypic.com/a0eyvs.jpg Das erste Listenelement verwendet die oben beschriebene Texteinzugstechnik . Verglichen mit dem, wie es normalerweise mit der Position im Listenstil aussieht: Draußen ist es falsch ausgerichtet, in diesem Fall um ein Pixel versetzt.
— Sunny
39

Der einfachste und sauberste Weg, ohne Hacks, besteht darin, das ul(oder ol) wie folgt einzurücken :

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Dies ergibt das gleiche Ergebnis wie die akzeptierte Antwort: https://jsfiddle.net/5wxf2ayu/

Bildschirmfoto:

Geben Sie hier die Bildbeschreibung ein

— Chuck Le Butt
quelle
1
Sie können beantragen müssen list-style-position: outsidezu <li>.
— Alex
@Alex Sie sollten dies nur tun müssen, wenn Sie das Überschreiben eines vorhandenen Stils erzwingen ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).
— Chuck Le Butt
25

Überprüfen Sie diese Geige:

http://jsfiddle.net/K6bLp/

Es zeigt, wie ul und ol mit CSS manuell eingerückt werden.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Auch ich habe deine Geige bearbeitet

http://jsfiddle.net/j7MEd/3/

Notieren Sie es.

— Deepan Babu
quelle
Danke, es funktioniert hervorragend für UL und für OL bis zu 9 Listeneinträge. Dies ist das Hauptproblem, das ich in meiner Fragenbreite der 11/12-Sache beschrieben habe. In meinem obigen Beispiel führe ich eine andere Technik aus, damit das Problem anders aussieht, aber der Kern des Problems bleibt gleich: Es gibt einen Unterschied, ob mein Dezimallistenpunkt eine oder zwei oder mehr Zahlen hat - z. B. 1., 11. oder 111.! Ich sehe keinen Punkt, an dem ich über CSS reagieren und den Texteinzug und den linken Rand an die Anzahl der Zahlen anpassen kann.
— Kernfrucht
Für den zweiten Zeileneinzug von ol (mehr als eine Ziffer) denke ich, dass CSS es nicht lösen wird. Wir sollten nur jquery gehen.
— Deepan Babu
Beachten Sie auch, dass das typeAttribut für <ol>in HTML 5 veraltet zu sein scheint. Verwenden Sie style="list-style-type: "stattdessen.
— AJ.
2
Sind 21 von euch überhaupt ernst? Das funktioniert nicht. Ich bin mir nicht sicher, ob Sie Ihren Code seit dem Posten geändert haben.
— JGallardo
9

Sie können den Rand und den Abstand eines oloder ulin CSS festlegen

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
quelle
Leider wird das Problem durch diese Lösung nicht gelöst: Die zweiten Zeilen sind bündig mit den
— Listenpunkten, die
11 und 12 in jsfiddle.net/j7MEd/1 stimmen mit den oberen und unteren Absätzen überein , und ich habe den Code nicht geändert. Vermisse ich etwas
— Luke2012
Nein, das ist nicht der Punkt. Das Hauptproblem ist, dass die zweite (und dritte usw.) Zeile jedes Listenpunkts nicht den gleichen "Einzug" wie die erste Zeile hat! (siehe jsfiddle-Beispiel). In meiner obigen Frage denke ich über eine Problemumgehung mit Auffüllen, Rand usw. nach, die jedoch nur für ungeordnete Listen funktioniert. Auf der bestellten Liste treten neue Probleme wie dieses 11/12 auf. Meine Hauptfrage lautet also: Wie kann ich das Einrückungs-Ding (wie ich es in meinem allerersten Beispiel meiner Frage präsentiere) für geordnete Listen ausführen, ohne Probleme wie das 11/12-Ding zu haben?
— Kernfrucht
Ok, tut mir leid! Dies ist eine Möglichkeit. Das einzige Problem besteht darin, einen Cross-Browser zu erreichen. Sie müssen den Rand im IE und das Auffüllen in Firefox festlegen. jsfiddle.net/j7MEd/2
— luke2012
7

Ich glaube, Sie müssen nur die Liste "Kugel" außerhalb der Polsterung setzen.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— KnownColor
quelle
6

Sie können CSS verwenden, um einen Bereich auszuwählen. In diesem Fall möchten Sie die Listenelemente 1-9:

ol li:nth-child(n+1):nth-child(-n+9)

Passen Sie dann die Ränder dieser ersten Elemente entsprechend an:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Sehen Sie es hier in Aktion: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

— LaFaucon
quelle
5

Das folgende CSS hat es geschafft:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— itoctopus
quelle
4

Meine Lösung ist die gleiche wie die von Pumbaa80 , aber ich schlage vor, display: tableanstelle von display:table-rowfor lielement zu verwenden. So wird es ungefähr so ​​sein:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

Jetzt können wir Ränder für den Abstand zwischen li's verwenden

— Alex
quelle
1

Ich mag diese Lösung selbst sehr gern:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}
— Corey Ballou
quelle
einzige Problem Schriftgröße
— Atilkan
0

Die alten, ul-Listen funktionieren, wenn Sie möchten. Sie können auch eine Tabelle mit Rahmen verwenden: keine in der CSS.

— Casualbot
quelle
Ich denke, dies ist keine gute Lösung in Bezug auf semantische Regeln
— Kernfrucht
0

CSS bietet nur zwei Werte für seine "Listenstilposition" - innen und außen. Mit "innen" sind zweite Zeilen bündig mit den Listenpunkten, nicht mit der übergeordneten Zeile:

Wenn Sie in geordneten Listen ohne Intervention dem Wert "list-style-position" den Wert "inside" geben, hat die zweite Zeile eines langen Listenelements keinen Einzug, sondern kehrt zum linken Rand der Liste zurück (dh zum linken Rand der Liste) wird linksbündig mit der Nummer des Elements ausgerichtet). Dies ist bei geordneten Listen besonders und tritt bei ungeordneten Listen nicht auf.

Wenn Sie stattdessen "Listenstil-Position" den Wert "außerhalb" geben, hat die zweite Zeile den gleichen Einzug wie die erste Zeile.

Ich hatte eine Liste mit einem Rand und hatte dieses Problem. Mit "list-style-position" auf "inside" sah meine Liste nicht so aus, wie ich es wollte. Wenn jedoch "Listenstil-Position" auf "außerhalb" gesetzt ist, fallen die Nummern der Listenelemente außerhalb des Rahmens.

Ich habe dieses Problem gelöst, indem ich einfach einen breiteren linken Rand für die gesamte Liste festgelegt habe, wodurch die gesamte Liste nach rechts zurück in die Position verschoben wurde, in der sie sich zuvor befand.

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: external;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
— Chris
quelle
-1

Ok, ich bin zurückgegangen und habe einige Dinge herausgefunden. Dies ist eine grobe Lösung für das, was ich vorgeschlagen habe, aber es scheint funktional zu sein.

Zuerst habe ich die Zahlen zu einer Reihe ungeordneter Listen gemacht. Eine ungeordnete Liste enthält normalerweise eine CD am Anfang jedes Listenelements (

  • ) Sie müssen also das CSS auf Listenstil einstellen: none;

    Dann habe ich die ganze Liste angezeigt: Tabellenzeile. Warum füge ich Ihnen hier nicht einfach den Code ein, anstatt darüber zu plappern?

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS:

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }}

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }}

    Dies scheint den Text in der 2. Division an den Zahlen in der geordneten Liste in der ersten Division auszurichten. Ich habe sowohl die Liste als auch den Text mit einem Tag umgeben, damit ich allen Divs sagen kann, dass sie als Inline-Blöcke angezeigt werden sollen. Das reihte sie gut ein.

    Der Rand dient dazu, ein Leerzeichen zwischen dem Punkt und dem Beginn des Textes zu setzen. Ansonsten laufen sie direkt gegeneinander und es sieht aus wie ein Schandfleck.

    Mein Arbeitgeber wollte, dass umlaufender Text (für längere bibliografische Einträge) mit dem Anfang der ersten Zeile und nicht mit dem linken Rand übereinstimmt. Ursprünglich zappelte ich mit einem positiven Rand und einem negativen Texteinzug, aber dann wurde mir klar, dass dies beim Wechsel zu zwei verschiedenen Divs dazu führte, dass der gesamte Text am linken Rand des Div ausgerichtet war war der Rand, an dem der Text natürlich begann. Alles, was ich brauchte, war ein Rand von 0,2 em, um etwas Platz hinzuzufügen, und alles andere war schwimmend ausgerichtet.

    Ich hoffe, das hilft, wenn OP ein ähnliches Problem hatte ... Ich hatte Schwierigkeiten, ihn / sie zu verstehen.

    • — David
    quelle
    -1

    Ich hatte das gleiche Problem und begann, die Antwort von user123444555621 zu verwenden . Ich musste jedoch auch jedem paddingein und hinzufügen , was diese Lösung nicht zulässt, da jedes ein istborderlilitable-row .

    Zuerst verwenden wir a, um das counterzu replizierenol Zahlen der .

    Wir setzen dann display: table;auf jeden liund display: table-cellauf den:before , um uns den Einzug zu geben.

    Endlich der knifflige Teil. Da wir nicht für das gesamte Tabellenlayout verwenden, olmüssen wir sicherstellen, dass jedes :beforedie gleiche Breite hat. Wir können die chEinheit verwenden , um die Breite ungefähr gleich der Anzahl der Zeichen zu halten. Um die Breiten gleichmäßig zu halten, wenn sich die Anzahl der Stellen für die :beforeunterscheidet, können wir Mengenabfragen implementieren . Angenommen, Sie wissen, dass Ihre Listen nicht 100 Elemente oder mehr enthalten, benötigen Sie nur eine Mengenabfrageregel :before, um die Breite zu ändern. Sie können jedoch problemlos weitere hinzufügen.

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
    Erweitern Sie das Snippet

    — Jacob Alvarez
    quelle
    Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
    Licensed under cc by-sa 3.0 with attribution required.