nicht angemeldet
Nummerierte Horizontale Liste
apsel
Gunnar BittersmannHallo!
Ich möchte eine nummerierte horizontale Liste anlegen:
<style type="text/css">
li { display:inline; list-style-type:decimal-leading-zero; }
</style>
<ol>
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
</ol>
Das Ergebnis ist: "Eins Zwei Drei"
Ich hätte aber gern: "01. Eins 02. Zwei 03. Drei"
Wie kann die Unterdrückung der Nummerierung verhindert werden?
Danke!
-
Hi sandwichx!
Das Ergebnis ist: "Eins Zwei Drei"
In welchem Browser?
mfG
Benjamin--
For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.-
Hallo Benjamin!
» In welchem Browser?
Sorry, wär' wohl nicht schlecht, das gleich immer am Anfang dazuzuschreiben. Also: Firefox 3.5.8 (Ubuntu 9.10 (karmic)).
Danke!
LG, S.
-
Om nah hoo pez nyeetz, sandwichx!
mach eine ul draus und füge die Nummerierung mit :before automatisch hinzu. Dazu gibt es hier einen aktuellen Thread.
Matthias
--
-
-
Om nah hoo pez nyeetz, apsel!
Auch Dir "Frieden im Herzen, Glück auf allen Wegen"!
Link zum Thread
Danke, aber: da geht's um Aufzählungszeichen, ich möcht gern eine fortlaufende Nummerierung haben (möglichst "einfach", also ohne counter-Konstrukte oder so).
Warum verschwindet die Nummerierung (oder Aufzählung) überhaupt? Dann brauch ich eh kein
<ol>, <li>mehr, sondern schreib einfach Text nebeneinander, ggf. mit<span class="...">?-
Hi sandwichx!
Warum verschwindet die Nummerierung (oder Aufzählung) überhaupt?
Das Aufzählungszeichen verschwindet, weil es zur Anzeige-Art list-item gehört, die Du mit display:inline überschreibst.
mfG
Benjamin--
For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.-
Das Aufzählungszeichen verschwindet, weil es zur Anzeige-Art list-item gehört, die Du mit display:inline überschreibst.
Aha. O.k. Soweit habe ich mich noch nicht in CSS vertieft.
Es ist dann halt überhaupt kein Unterschied mehr zwischen<ol>und<ul>, oder?Danke!
-
Om nah hoo pez nyeetz, sandwichx!
Aha. O.k. Soweit habe ich mich noch nicht in CSS vertieft.
Es ist dann halt überhaupt kein Unterschied mehr zwischen<ol>und<ul>, oder?wenn sie nicht als Listenpunkte dargestellt werden, sieht man den Unterschied nicht mehr.
Matthias
--
-
-
-
Om nah hoo pez nyeetz, sandwichx!
Danke, aber: da geht's um Aufzählungszeichen, ich möcht gern eine fortlaufende Nummerierung haben (möglichst "einfach", also ohne counter-Konstrukte oder so).
Wäre aber eine semantisch saubere Lösung.
Warum verschwindet die Nummerierung (oder Aufzählung) überhaupt? Dann brauch ich eh kein
<ol>, <li>mehr, sondern schreib einfach Text nebeneinander, ggf. mit<span class="...">?Wenn du das nicht möchtest, bleibt eigentlich nur die float-Lösung + zusätzliches margin sonst sieht es so aus:
einszweidrei
und die Aufzählungszeichen bzw. Nummerierung liegt irgendwo dahinter.
Matthias
--
-
-
-
-
-
-
Hi!
Das Ergebnis ist: "Eins Zwei Drei"
Ich hätte aber gern: "01. Eins 02. Zwei 03. Drei"
Unterlasse das
display:inlineund lasse die li-Elemente per float fließen - gib ihnen eine (Mindest-)Breite.off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Hallo Peter!
» Unterlasse das
display:inlineund lasse die li-Elemente per float fließen - gib ihnen eine (Mindest-)Breite.In Wirklichkeit sind es viel mehr und unterschiedlich lange Listenpunkte. Ich möchte keinen Platz "verschwenden" und daher keine (Mindest-)breite vergeben.
Danke!
LG, S.
-
-
Typisch: Da tut man eine Zeitlang herum und kaum stellt man die Frage ins Forum, kommt man selber auf die Antwort. Also, im Gegensatz zur Vermutung sind Counter gar nicht so kompliziert:
<style type="text/css"> ol, ul { counter-reset:num; margin-left:-2.3em; } li { display:inline; } li:before { content:counter(num)"." ; counter-increment:num; } </style><ol> <li>Eins</li> <li>ZweiZwei</li> <li>DreiDreiDrei</li> </ol>Das ergibt dann: "1.Eins 2.ZweiZwei 3.DreiDreiDrei"
margin-left:-2.3em;: damit die ganze Liste wieder an den linken Rand rückt (Listenpunkt-Einrückung kompensieren)list-style-type:decimal-leading-zero;: funktioniert dann allerdings nicht mehr. (Ginge sicher irgendwie mit einer nun doch komplizierteren Konstruktion.)Trotzdem frage ich mich, wieso die Aufzählungszeichen/Nummerierung überhaupt verschwindet bei
display:inline;.Danke für alle Bemühungen und Anregungen!
-
list-style-type:decimal-leading-zero;: funktioniert dann allerdings nicht mehr. (Ginge sicher irgendwie mit einer nun doch komplizierteren Konstruktion.)Korrigiere:
li:before { content:counter(num, decimal-leading-zero)"." ; counter-increment:num; }-
Om nah hoo pez nyeetz, sandwichx!
li:before { content:counter(num, decimal-leading-zero)"." ;
counter-increment:num; }
Vielleicht statt "." lieber ". "? Matthias -- -
@@apsel:
nuqneH
Vielleicht statt "." lieber ". "?
Nein, sondern ".\A0 ".
Zwischen Numerierung und Itemtext sollte kein Zeilenumbruch auftreten; also U+00A0 no-break space.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Nein, sondern ".\A0 ".
Das sind doch so bestimmt zwei Leerzeichen?!
Matthias
--
-
@@apsel:
nuqneH
Nein, sondern ".\A0 ".
Das sind doch so bestimmt zwei Leerzeichen?!Nein, das Leerzeichen beendet in CSS ein Escape. [CSS2 §4] Das Leerzeichen ist hier aber optional.
So ist '
.\31 fach' kein Nachfahrenselektor, sondern der Selektor für die Klase "1fach". Das Leerzeichen ist hier nicht optional, da 'f' ohne Leerzeichen davor als Teil der Hexadezimalzahl interpretiert werden würde.Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
@@Gunnar Bittersmann:
nuqneH
So ist '
.\31 fach' kein Nachfahrenselektor, sondern der Selektor für die Klase "1fach". Das Leerzeichen ist hier nicht optional, da 'f' ohne Leerzeichen davor als Teil der Hexadezimalzahl interpretiert werden würde.'a' und 'c' natürlich auch noch.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a
-
-
-
-
-
-