✔ <ul>-Tag bei float falsch angeordnet

[hurzi]

N'Abend!
Ich habe ein div-Element, das ich per float:left neben einen Text setzen will. Nun soll im Text aber auch eine Liste auftauchen, die aber falsch dargestellt wird. Der Text der Listenelemente beginnt dort wo der restliche Text auch beginnt, die Listpunkte sind also in dem div-Element.
Hier der Code:

<div style="float:left; width:150px; height:150px; background:#000000; ">Text</div>
<ul>
<li>liste</li>
<li>liste</li>
<li>liste</li>
<li>liste</li>
</ul>

Ich weiß nicht, woran es liegt, aber ich kann die Liste auch nicht in einen div-Tag packen und den dann per margin von dem anderen div-Element "wegschieben", die Liste lässt sich einfach nicht bewegen.
Mach ich was falsch?

 

[Quaese]

Hi,

wenn du das ul-Element ebenfalls floatest, sollte eine Anpassung eigentlich möglich sein.
Aufpassen musst du noch mit den unterschiedlichen Standardwerten der verschiedenen Browser
bei der Einrückung. Einige realisieren den linken Rand über margin (IEs), andere über padding.
In den IEs unterscheidet sich der linke Rand sogar in den unterschiedlichen Versionen.

Hiermit solltest du ein einigermassen einheitliches Erscheinungsbild erreichen:

ul, li{ margin: 0;         /* Zunächst Standardeinrückungen */
        padding: 0;}       /* zurücksetzen                  */
ul{ float: left;}
li{ margin-left: 5px;      /* Abstand links für IE 5.x */
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 20px;}    /* Abstand links sonst */
.dummy{}                   /* Dummyklasse, um IE-Verwirrung zu beseitigen */

Dein HTML-Code bleibt der gleiche wie bisher.

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

 

[hurzi]

Funktioniert so einwandfrei. Vielen Dank!