Höhe, wenn Floating enthalten ist

Lesezeit: 3 Minuten

Benutzer-Avatar
Tsusanka

Ich habe eine Liste:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
</ul>

All die <li> schweben. Ich brauche die Höhe der <ul> Kasten. Wenn ich mich recht erinnere, ist das nicht gültig:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
 <hr class="clear" />
</ul>

.clear {
   clear: both;
}

Wie kann ich das machen? Die Anzahl der Elemente in der Liste kann unterschiedlich sein, daher kann ich keine feste Höhe verwenden.

  • Wenn Sie “ALLE” Elemente in einem enthaltenden Element schweben lassen, wird die Höhe des enthaltenden Elements reduziert und nicht um das schwebende Element “gewickelt”. Viele Möglichkeiten, dies zu umgehen. Das Hinzufügen von overflow: auto zum enthaltenden Element löst das Problem. Das Hinzufügen eines zusätzlichen Elements am unteren Rand löst das Problem ebenfalls.

    – Jawad

    19. Juli 2011 um 17:25 Uhr

Benutzer-Avatar
dreißigpunkt

Gute Optionen, um die Schwimmer einzudämmen:

  • Hinzufügen overflow: hidden zum ul.
  • Verwenden klarfix.

  • danke und thx auch für die links würde ich trotzdem googeln 🙂

    – Tsusanka

    19. Juli 2011 um 17:51 Uhr

  • Danke für die Antwort. Ich verstehe nicht die Logik, warum das funktioniert. Man könnte meinen, overflow:hidden würde das Gegenteil bewirken

    – Nate Flink

    17. Januar 2013 um 21:48 Uhr

  • auch warum umschließt das enthaltende Element nicht die Float-Elemente? Warum also wickelt sich das ul nicht um die schwebenden li-Elemente?

    – Benutzer590849

    6. Juni 2013 um 23:22 Uhr

  • clearfix reicht.. keine ahnung warum jemand in diesem fall overflow:hidden zur ul hinzufügt lol ^^

    – Fabster

    22. Juni 2014 um 9:15 Uhr

  • @user590849 stackoverflow.com/questions/3400749/…

    – CodeFarmer

    11. März 2015 um 0:32 Uhr

Dies ist keine direkte Antwort auf Ihre Frage, aber als Alternative könnten Sie die Verwendung von in Betracht ziehen display:inline-block? Heutzutage benutze ich das stattdessen float wo möglich, da es im Wesentlichen die meiste Zeit das gleiche Ziel erreichen kann, ohne den ganzen Aufwand, Behälter herzustellen, die innere Schwimmelemente enthalten und müssen clear sie die ganze Zeit.

  • inline-block ist eine gültige Option, hat aber ihre eigenen (lösbaren) Nachteile, wie z.

    – dreißig Punkte

    19. Juli 2011 um 17:28 Uhr

  • Ah, verstanden. Ich muss gestehen, dass ich den Luxus habe, ältere Browser wie IE7 ignorieren zu können, denn was ich mache, ist eine Art spezialisiertes Zeug, bei dem der vom Endbenutzer verwendete Browser gewissermaßen bekannt und kontrolliert ist. Es war auf jeden Fall eine Erwähnung wert.

    – Trevor

    19. Juli 2011 um 17:32 Uhr

Probier es aus:

ul { overflow: hidden; }
li { float:right; display:block; }

Fügen Sie Ihren Elementen Klasse hinzu, tun Sie dies nicht für alle Elemente.

Hier stelle ich eine der einfachsten Möglichkeiten vor, mit solchen Situationen umzugehen.

Float Left hat immer eine Reaktion und ist nicht gut zu verwenden, wenn wir eine Alternative dazu haben.

Die Alternative ist:

li { display:inline-block; }

Es muss kein zusätzlicher Code wie float:left und overflow:hidden hinzugefügt werden 🙂

1093260cookie-checkHöhe, wenn Floating enthalten ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy