Wie können Sie passen Sie die zahlen in eine geordnete Liste?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie kann ich Links-richten Sie die Nummern in eine geordnete Liste?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Ändern Sie die Zeichen nach der Anzahl der in einer geordneten Liste?
1) an item
Auch gibt es eine CSS-Lösung ändern von zahlen zu Buchstaben/roman-Liste statt mit dem type-Attribut auf das ol-element.
Ich bin hauptsächlich daran interessiert, Antworten auf Firefox 3.
Lösung
Dies ist die Lösung, die ich habe den Mechanismus in Firefox 3, Opera und Google Chrome.Die Liste zeigt immer noch in IE7 (aber ohne Klammer und Links ausrichten zahlen):
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>EDIT: Mehrere Linie zu beheben, indem Sie strager
Auch gibt es eine CSS-Lösung ändern von zahlen zu Buchstaben/roman-Liste statt mit dem type-Attribut auf das ol-element.
Finden list-style-type CSS-Eigenschaft.Oder wenn Sie den Zähler mit dem zweiten argument akzeptiert eine Liste-Stil-Typ Wert.Zum Beispiel im folgenden wird die Verwendung oberen roman:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Andere Tipps
Das CSS für das styling von Listen ist hier, aber im Grunde:
li {
list-style-type: decimal;
list-style-position: inside;
}
Jedoch, die spezifische Layouts Sie sind nach wohl nur erreicht werden durch eintauchen in die Innereien der layout mit so etwas wie diese (beachten Sie, dass ich noch nicht wirklich versucht):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Sie können auch geben Sie Ihre eigenen zahlen in die HTML - z.B.wenn die zahlen sind von einer Datenbank:
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>
Die seq Attribut ist, sichtbar gemacht mithilfe einer Methode ähnlich wie in anderen Antworten.Aber statt mit content: counter(foo), wir verwenden content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
Stahlen eine Menge von anderen Antworten, aber das funktioniert in FF3 für mich.Es hat upper-roman, einheitliche Einzüge, eine schließende Klammer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Ich schlage vor, spielen mit den :bevor Attribut und zu sehen, was Sie können erreichen mit es.Er bedeutet, dass Ihr code wirklich begrenzt ist schön, einen neuen Browser zu und schließt die (dummerweise großer) Abschnitt der Markt immer noch mit-Müll-alte-Browser,
So etwas wie die folgenden, welche Kräfte ein fester mit die Einzelteile.Ja, ich weiß, es ist weniger elegant zu haben, um wählen Sie die Breite Sie selbst, aber die Verwendung von CSS für das layout ist wie undercover-Polizei-Arbeit:aber gut, Ihre Motive, es wird immer chaotisch.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Aber Sie gehen zu müssen, zu Experimentieren, um zu finden Sie die genaue Lösung.
Die zahlen line-up besser, wenn Sie hinzufügen führenden Nullen an die zahlen, indem Sie die Einstellung list-style-type zu:
ol { list-style-type: decimal-leading-zero; }
Entlehnt und verbessert Marcus Downing Antwort.Getestet und funktioniert in Firefox 3 und Opera 9.Unterstützt mehrere Linien, zu.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
Es ist der Type-Attribut das ermöglicht die änderung der Nummerierung der Art, jedoch, Sie können nicht ändern der Punkt nach der Zahl/Buchstabe.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
Die docs sagen über list-style-position: outside
CSS1 nicht angeben, die genaue Lage der Markierung Feld-und aus Gründen der Kompatibilität, CSS2, bleibt ebenso unklar.Für mehr präzise Steuerung der marker-Boxen, bitte verwenden Sie Markierungen.
Weiter oben auf dieser Seite ist das Zeug über Marker.
Ein Beispiel ist:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Nope...verwenden Sie einfach ein DL:
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}
Ich habe es.Versuchen Sie Folgendes:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>
Der Haken ist, dass dieser definitiv funktioniert nicht auf älteren oder weniger konformen Browser: display: inline-block eine ganz neue Eigenschaft.
Schnelle und Schmutz alternative Lösung.Können Sie ein Tab-Zeichen zusammen mit vorformatierten text.Hier ist eine Möglichkeit:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
und Ihr html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Beachten Sie, dass der Raum zwischen den li tag und dem Anfang der text ist ein Tabulator-Zeichen (das, was Sie bekommen, wenn Sie drücken Sie die tab-Taste innerhalb Editor).
Wenn Sie brauchen, um die Unterstützung für ältere Browser, Sie können tun diese statt:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
Die anderen Antworten sind besser aus konzeptioneller Sicht.Sie können jedoch nur Links-pad-Nummern mit der entsprechenden Anzahl von '', um Sie line-up.
* Hinweis:Ich habe zunächst nicht erkennen, dass eine nummerierte Liste verwendet wurde.Ich dachte, die Liste wurde ausdrücklich generiert.
Ich gebe hier die Art von Antwort, die ich normalerweise nicht gerne Lesen, aber ich denke, da gibt es andere Antworten sagen, wie zu erreichen, was Sie wollen, es könnte nett sein, zu überdenken, ob das, was Sie versuchen zu erreichen, ist wirklich eine gute Idee.
Zuerst sollte man sich überlegen, ob es eine gute Idee, um zu zeigen, die Elemente, die in einem nicht-standard-Weg, mit einem separator charater andere als die mitgelieferten.
Ich weiß nicht, die Gründe für, dass, aber nehmen wir an, Sie haben gute Gründe.
Die Möglichkeiten propossed hier zu erreichen, die darin bestehen, Inhalte hinzufügen, um Ihre markup, vor allem durch die CSS :vor pseudoclass.Dieser Inhalt ist wirklich modifing Ihre DOM-Struktur, hinzufügen dieser Elemente.
Wenn Sie standard "ol" zählen, haben Sie einen gerenderten Inhalt in dem die "li" - text ist wählbar, aber die vorangegangene Zahl ist nicht auswählbar., Dass ist, die standard numbering system scheint zu sein, mehr "Dekoration", als wirklichen Inhalt.Wenn Sie Inhalte hinzufügen, für die zahlen zum Beispiel jene, die "vor" - Methoden werden diese Inhalte auswählbar sein und dued, um dies durchführen zu unerwünschten vopy/paste Fragen oder Zugänglichkeit Probleme mit Screenreader Lesen diese "neue" Inhalte zusätzlich zu den standard-Nummerierung system.
Vielleicht ein anderer Ansatz könnte sein, zu Stil die Nummern mit Bildern, obwohl diese alternative bringt seine eigenen Probleme mit sich (zahlen werden nicht angezeigt, wenn Bilder deaktiviert sind, wird die text-Größe für die Anzahl nicht ändern, ...).
Sowieso, der Grund für diese Antwort ist nicht nur vorschlagen, diese "Bilder" alternative, aber die Leute denken zu lassen, in den Folgen versuchen zu ändern die standard-Nummerierung system für geordnete Listen.
Dieser code macht Nummerierung Stil gleiche wie Header li-Inhalte.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
