Webblob: <ul> Liste ohne Zeilenumbruch

Beitrag lesen

Zeitlenumbrüche von block-Elementen bekommt man über display:inline weg.

Oder float:left.
Gunnar

So einfach ist es nur in der Theorie. Hier mal je ein (kurzes) Beispiel zu den beiden Varianten:

Variante 1 mit display:inline

<h1 style="display: inline;">Überschrift</h1>
<ul style="display: inline; margin: 0; padding: 0;">
<li style="display: inline; margin: 0 20px; padding: 0 20px;">Punkt 1</li>
<li style="display: inline; margin: 0 20px; padding: 0 20px;">Punkt 2</li>
<li style="display: inline; margin: 0 20px; padding: 0 20px;">Punkt 3</li>
</ul>

Variante 2 mit float:left

<div style="width: 50%;">
<h1 style="float: left; width: 40%;">Überschrift</h1>
<ul style="float: left; width: 60%; margin: 0; padding: 0;">
<li style="margin: 0 20px; padding: 0 10px;">Punkt 1</li>
<li style="margin: 0 20px; padding: 0 10px;">Punkt 2</li>
<li style="margin: 0 20px; padding: 0 10px;">Punkt 3</li>
</ul>
</div>

Bei Variante 1 fehlen die Listenaufzählungszeichen und bei Variante 2 besteht das Hauptproblem imho darin, dass laut Spec. bei einem float immer eine explizite Breite angegeben werden muss.

Von den üblichen Unterschieden in der Darstellung in den einzelnen Browsern sowieso mal ganz zu schweigen.

Gruß Gunther