Effacer un
-
29-10-2019 - |
Question
Je dialyse avec float: left;
et le CSS-Réinitialisation par Eric Meyer avec class="clearfix"
. Mais il y a un cas spécial, je me demande comment effacer correctement un élément flottant: à l'intérieur <ul> ... </ul>
.
Hauteur correcte, mais le HTML-Code IST pas valide!
Comment puis-je effacer le flotteur dans le <ul>
avec du code valide?
Merci, Johannes
La solution
Ajouter simplement overflow: hidden
au ul
ensemble de règles de l'élément. Recherchez des «flotteurs de compensation» sur Google ou Stack Overflow pour d'autres solutions, mais dans ce cas, cela devrait être le plus propre.
Démo jsfiddle: http://jsfiddle.net/9sxrn/1/
Autres conseils
Si je comprends bien, Float peut être appliqué aux éléments de blocs, qui ne peuvent pas être insérés dans UL. (Ni div, ni BR que vous ne pouvez pas insérer dans UL). En fait, vous le pouvez, mais ce n'est pas valable.
Alors, j'ai couvert votre UL de conteneur div:
<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>
et css de ul a fait css de .ul-container
.ul-container {
border: 2px solid red;
}
ul li {
float:left;
background: #ccc;
margin: 5px;
}
Utilisation overflow:hidden;
sur le ul