webentwicklung-frage-antwort-db.com.de

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

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

zB :

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 liefert nur zwei Werte für seine "Listenstil-Position" - innen und außen. Mit "inside" schließen die zweiten Zeilen mit den Listenpunkten ab, 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" Meine Liste ist nicht mehr bündig mit übergeordneten Textblöcken.

Experimente mit einer Breite von Text-Einzug, Links-Auffüllen und Links-Rand funktionieren für ungeordnete Listen, schlagen jedoch für geordnete Listen fehl, da dies von der Anzahl der Zeichen der Listendezimalstelle 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 zweiten Gedankenstrich? Danke für deinen Einsatz!

238
kernfrucht

Aktualisieren

Diese Antwort ist veraltet. Sie können dies viel einfacher tun, wie ich darauf hingewiesen habe, dass ich überrascht bin, dass dies noch nicht gelöst wurde. Sie können den Tabellenlayout-Algorithmus des Browsers (ohne Verwendung von Tabellen) folgendermaßen verwenden:

ul {
  list-style-position: outside;
}

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

Ursprüngliche Antwort

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/

enter image description here

Verwenden Sie die Legacy-Notation :before Mit einem Doppelpunkt, damit es in IE8 funktioniert.

244

Ich glaube, das wird 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/

enter image description here

204
JTOrlando

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

ol {
  padding-left: 40px;
  list-style-position: outside;
}

Dies ergibt dasselbe Ergebnis wie die akzeptierte Antwort: https://jsfiddle.net/af2fqryz/

Bildschirmfoto:

enter image description here

35
Chuck Le Butt

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

Machen Sie sich eine Notiz davon.

25
Deepan Babu

Sie können den Rand und den Abstand eines ol oder ul in CSS festlegen

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
9
luke2012

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

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

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 für diese 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/

5
LaFaucon

meine Lösung ist ziemlich dieselbe wie die von Pumbaa8 , aber ich schlage vor, display: table anstelle von display:table-row für das li -Element zu verwenden. Es wird also ungefähr so ​​aussehen:

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

Daher können wir jetzt Ränder für den Abstand zwischen li verwenden

3
Alex

Ich selbst mag diese Lösung 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;
}
1
Corey Ballou

Das folgende CSS hat den Trick gemacht:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
1
itoctopus

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

0
Casualbot

CSS liefert nur zwei Werte für seine "Listenstil-Position" - innen und außen. Bei "innen" sind die zweiten Zeilen bündig mit den Listenpunkten, nicht mit der übergeordneten Linie:

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

Wenn Sie stattdessen "list-style-position" den Wert "outside" geben, hat die zweite Zeile den gleichen Einzug wie die erste Zeile.

Ich hatte eine Liste mit einer Grenze und hatte dieses Problem. Wenn "list-style-position" auf "inside" gesetzt ist, sah meine Liste nicht so aus, wie ich es wollte. Bei der Einstellung "Listenstil-Position" auf "Außerhalb" fielen die Nummern der Listenelemente jedoch außerhalb des Kästchens.

Ich löste dieses Problem, indem ich einfach einen breiteren linken Rand für die gesamte Liste einstellte, wodurch die gesamte Liste nach rechts verschoben wurde und wieder an die Position zurückkehrte, an 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: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
0
Chris