bobbix: Liste mit nebeneinander stehenden Listenelementen und %-padding

Beitrag lesen

SELF-Forum

Liste mit nebeneinander stehenden Listenelementen und %-padding

bobbix
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln