-
29-10-2019 - |
Frage
Ich beschäftige mich mit float: left;
und dem CSS-Reset von Eric Meyer mit class="clearfix"
.Aber es gibt einen Sonderfall, ich frage mich, wie man ein floatd-Element richtig löscht: Innerhalb von <ul> ... </ul>
.
Richtige Höhe, aber der HTML-Code ist ungültig !
Wie kann ich den Float im <ul>
mit gültigem Code löschen?
Danke, Johannes
Lösung
Fügen Sie einfach overflow: hidden
zum Regelsatz des ul
-Elements hinzu.Suchen Sie bei Google nach "Clearing Floats" oder nach "Stack Overflow" für andere Lösungen. In diesem Fall sollte dies jedoch die sauberste sein.
jsfiddle-Demo: http://jsfiddle.net/9sxrN/1/
Andere Tipps
Soweit ich weiß, kann float auf Blockelemente angewendet werden, die nicht in UL eingefügt werden können.(weder div noch BR können Sie nicht in UL einfügen).In der Tat können Sie, aber es ist nicht gültig.
Also habe ich deine ul mit div container bedeckt:
<div class="ul-container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<br style="clear:both">
</div>
<b>The height of the ul-tag is ok, but the code is not valid!</b>
und css von ul ein gemachtes css von .ul-container
.ul-container {
border: 2px solid red;
}
ul li {
float:left;
background: #ccc;
margin: 5px;
}
Verwenden Sie overflow:hidden;
für den ul