Liste mit nebeneinander stehenden Listenelementen und %-padding
1 
Ole
0 
bobbix
1 
Gunnar Bittersmann
2 0 bobbix
2 
Matthias Apsel
0 bobbix
Liste mit nebeneinander stehenden Listenelementen und %-padding
Hallo liebe Leute,
ich benötige einen rechtsbündige Liste mit nebeneinander stehenden Listenelementen, deren Breite sich nach dem Inhalt richtet. Diese Listenelemente müssen zudem prozentuale Padding-Werte zugewiesen werden. Dies führt jedoch (in Chrome, Safari, FF) dazu, dass die Listenelemente wieder umbrechen. Hat jemand von Euch eine Lösung für dieses Problem, da ich total auf dem Schlauch stehe. Komischerweise habe ich auch nichts im Internet gefunden.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listenelemente nebeneinander mit prozentualem Padding</title>
<style type="text/css">
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
float: right;
}
li {
float: left;
padding: 0 4%;
}
</style>
</head>
<body>
<ul>
<li>1. Listenpunkt</li>
<li>2. Listenpunkt</li>
</ul>
</body>
</html>
Vielen Dank vorab für Eure Hilfe.
Liebe Grüße
bobbix
-
Hallo bobbix,
du würdest dir das Leben etwas leichter machen, wenn du statt auf float bei den <li> auf inline-block setzen würdest. Dann ersetzt du noch das float beim <ul> durch "text-align: right" und es sieht aus wie gewünscht ... zumindest bei meinem flüchtigen Test im Chrome.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Listenelemente nebeneinander mit prozentualem Padding</title> <style type="text/css"> ul, li { margin: 0; padding: 0; } ul { text-align: right; } li { display: inline-block; padding: 0 4%; } </style> </head> <body> <ul> <li>1. Listenpunkt</li> <li>2. Listenpunkt</li> </ul> </body> </html>Gruß
Ole-
Hallo Ole,
vielen Dank für Deinen Lösungsvorschlag. Es funktioniert im Chrome, Safari und FF. Allerdings gibt es dabei etwas zu beachten (siehe unten).
Hallo bobbix,
du würdest dir das Leben etwas leichter machen, wenn du statt auf float bei den <li> auf inline-block setzen würdest. Dann ersetzt du noch das float beim <ul> durch "text-align: right" und es sieht aus wie gewünscht ... zumindest bei meinem flüchtigen Test im Chrome.
Oftmals stehen die einzelnen li-Elemente im HTML-Code untereinander. Bei der Änderung der Darstellungsrolle fügen manche Browser für jeden Zeilenumbruch etwas Leerraum zwischen den Einträgen ein.
Daher verwendete ich die Eigenschaft float, die die Zwischenräume zuverlässig entfernt.
Der Grund dafür liegt in der Definition für Floats, nach der sich deren seitliche
Außenkanten zwar nicht überschneiden dürfen, aber so dicht beieinanderstehen müssen
wie möglich. Um dies zu beheben, kann man der Schriftgröße der Liste den Wert 0 zuweisen und dem Listenelement die gewünschte Schriftgröße in Pixel.<!doctype html> <html> <head> <meta charset="utf-8"> <title>Listenelemente nebeneinander mit prozentualem Padding</title> <style type="text/css"> ul, li { margin: 0; padding: 0; } ul { text-align: right; font-size: 0; background-color: #f00; } li { display: inline-block; padding: 0 4%; font-size: 14px; background-color: #0f0; } </style> </head> <body> <ul> <li>1. Listenpunkt</li> <li>2. Listenpunkt</li> </ul> </body> </html>Möchte man die Schriftgröße des Listenelements in EM angeben, wird es problematisch, da diese sich nun auf den Wert 0 der Schriftgröße des Elternelements bezieht. Dies führt dazu, dass keine Schrift mehr angezeigt wird. Weiß jemand eine Lösung für dieses Problem?
Vielen Dank vorab für Eure Lösungsvorschläge!
Schöne Grüße
bobbix
-
@@bobbix:
nuqneH
Möchte man die Schriftgröße des Listenelements in EM angeben, wird es problematisch, da diese sich nun auf den Wert 0 der Schriftgröße des Elternelements bezieht. Dies führt dazu, dass keine Schrift mehr angezeigt wird. Weiß jemand eine Lösung für dieses Problem?
rem [css3-values §5.1.1]
Siehe Diskussion https://forum.selfhtml.org/?t=215086&m=1472545 ff.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Moin,
Oftmals stehen die einzelnen li-Elemente im HTML-Code untereinander. Bei der Änderung der Darstellungsrolle fügen manche Browser für jeden Zeilenumbruch etwas Leerraum zwischen den Einträgen ein.
Vielleicht wäre für dich eine andere Lösung, als die Elemente zu floaten, besser. Methoden dieses Verhalten zu umgehen sind hier beschrieben (bzw. hier).
Grüße Marco
--
Ich spreche Spaghetticode - fließend. -
Hallo Marco und Gunnar,
vielen Dank für Eure Hinweise und Links, ich habe sehr viel dazugelernt.
Nachfolgend der überarbeitete Code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Listenelemente nebeneinander mit prozentualem Padding</title> <style type="text/css"> ul, li { margin: 0; padding: 0; list-style-type: none; } ul { text-align: right; font-size: 0; } li { display: inline-block; padding: 0 4%; font-size: 0.875rem; } </style> </head> <body> <ul> <li>1. Listenpunkt</li> <li>2. Listenpunkt</li> </ul> </body> </html>Liebe Grüße und einen schönen Abend an Euch Beide.
bobbix
-
Om nah hoo pez nyeetz, bobbix!
li {
display: inline-block;
padding: 0 4%;
font-size: 0.875rem;
}Ich empfehle, dumme Browser nicht ohne Text da stehen zu lassen. ~~~css li { display: inline-block; padding: 0 4%; font-size: 16px; font-size: 0.875rem; }Matthias
-
Hallo Matthias,
vielen Dank für Deinen Hinweis. Da habe ich doch glatt die "unmodernen" Browser vergessen. :-)
Ich wünsche Dir noch einen schönen Tag
bobbix
-
-
-
-
