Problem mit Höhe von <ul> mit floatenden <li>

[joeboe]

Hallo Gemeinde.

Mein Problem ist folgendes:

Wenn ich in meiner <ul> foatende <li> verwende, spannt sich das <ul> nicht um die <li> und die Höhe des <ul> bleibt 0.

Wenn ich dann nach der <ul> das float breake hab ich das Problem dass sich die folgenden Elemente an dem <ul> Tag orientieren und so in die <li> crashen.


Kennt einer eine elegante, valide Lösung dieses Problem zu beheben? Arbeite zZ mit dem height atribut für das <ul> aber das find ich nicht so elegant.

 

[Maik]

Hi,

mir ist derzeit nicht ganz klar, wieso nach dem Beenden der Floats, die nachfolgenden Elemente in die Listenpunkte rutschen.

Möglicherweise hilft dir mein Webmaster-FAQ-Artikel [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an? weiter.

mfg Maik

 

[joeboe]

hab mich etwas unklar ausgedrückt.
Die Elemente rutschen nicht von der Seite(floaten) an die <li> sondern drücken von unten in die Liste rein weil das <ul> ne height von 0px hat aber die <li> ne height von beispielsweise 20px. Das <ul> adaptiert quasi die height von den <li> nicht weil ich innheralb der <ul> nicht valide clearen kann.

 

[Maik]

Wieso solltest du innerhalb des ul-Listenelements nicht valide "clearen" können?

<ul class="clearfix">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>
<p>Nachfolgender Textabsatz, der nicht von unten in die Liste "crasht" / drückt / rutscht.</p>

ul {
background:#ddd;
}

li {
float:left;
height:20px;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik