web-dev-qa-db-fra.com

<ul> hauteur lorsque contenant flottant <li>

J'ai une liste:

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

Tous les <li> flottent. J'ai besoin de la hauteur du <ul> boîte. Si je me souviens bien, ce n'est pas valable:

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

.clear {
   clear: both;
}

Comment puis-je faire ceci? Le nombre d'éléments dans la liste peut être différent, je ne peux donc pas utiliser une hauteur fixe.

htmlcsshtml-listscss-float
31
tsusanka

Bonnes options pour contenir les flotteurs:

60
thirtydot

Ce n'est pas une réponse directe à votre question, mais vous pouvez également envisager d'utiliser display:inline-block? Ces jours-ci, j'utilise cela au lieu de float dans la mesure du possible, car essentiellement la plupart du temps, il peut atteindre le même type d'objectif sans avoir à se soucier de faire en sorte que les conteneurs contiennent correctement les éléments flottants intérieurs et d'avoir à clear eux tout le temps.

3
Trevor

Ici, je présente, l'un des moyens les plus simples de gérer ce genre de situations.

Le flotteur gauche a toujours une réaction et n'est pas bon à utiliser si nous en avons une alternative.

L'alternative est:

li { display:inline-block; }

Pas besoin d'ajouter du code supplémentaire comme float: left et overflow: hidden :)

1
Husen

essaye-le:

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

ajoutez de la classe à vos éléments, ne faites pas cela pour tous les éléments.

1
ali youhannaei