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!
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/
Verwenden Sie die Legacy-Notation :before Mit einem Doppelpunkt, damit es in IE8 funktioniert.
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/
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:
Überprüfen Sie diese Geige:
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
Machen Sie sich eine Notiz davon.
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;
}
Ich glaube, Sie müssen nur die Liste "Kugel" außerhalb der Polsterung setzen.
li {
list-style-position: outside;
padding-left: 1em;
}
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/
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
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;
}
Das folgende CSS hat den Trick gemacht:
ul{
margin-left: 1em;
}
li{
list-style-position: outside;
padding-left: 0.5em;
}
Die ol, ul-Listen funktionieren, wenn Sie möchten, Sie können auch eine Tabelle mit Rahmen verwenden: keine in der CSS.
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;">