Div effondrement après float css

J'ai un div appelé valeur liquidative et à l'intérieur de la valeur liquidative j'ai un UL avec 5 li lequel je flotte vers la gauche, le li qui est, mais quand je le fais, que la valeur liquidative s'effondre. Je le sais parce que j'ai mis une bordure autour de NAV pour voir si ça s'effondre et il le fait. Voici l'exemple.

s'est effondré http://img401.imageshack.us/img401/8867/collapsedze4.png

pas effondré http://img71.imageshack.us/img71/879/nocollapsedkx7.png

comme vous pouvez le voir sur la première image, les liens de la valeur liquidative div sont flottaient à gauche et qu'
bordure noire ontop est le div appelé NAV.

dans cette image, vous pouvez voir comment il a bordure supérieure et inférieure, et il ne s'est effondré.

voici le code html et css que j'ai utilisé.

le texte d'alt http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

Où est la question? Je n'ai pas trouvé de point d'interrogation et n'a pas compris votre question, si il y en a un.
Alors que j'ai eu la réponse que j'ai besoin de cette "question", je le trouve difficile à lire.

InformationsquelleAutor user36682 | 2008-12-16

36

Ajouter tout overflow valeur autre que visible à votre conteneur:
```
div#nav { overflow:auto; }
```
Puis ajouter width pour restaurer la largeur
```
div#nav { width: 100%; overflow:auto; }
```
- C'est la pratique j'ai utilisé pendant un certain temps et il semble être la plus élégante.
- plus élégant jusqu'à ce que quelque chose de dépassements de la limite...
- Rien n'est parfait! Pourquoi ne pas ajouter votre réponse? Mais dépêchez-vous, parce que la question a déjà été ouverte pour 3 ans et demi...
- De la sorte? Je n'ai trouvé que c'maintenant et voudrais d'autres personnes qui trouvent qu'il commence maintenant à être au courant de la question, mieux vaut tard que jamais.
- Désolé, les 3 ans et demi commentaire était plus un jab à user36682. Mais sérieusement, si vous avez une meilleure réponse, vous devez l'ajouter (ou modifier ma réponse pour l'améliorer) - c'est ce que cet endroit est tout au sujet. 🙂
InformationsquelleAutor Ken

Une solution consiste à ajouter un "clear:both" style à un élément après le dernier flottait ancre, par exemple:

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

Cela provoque l'contenant l'élément à effacer tous les éléments flottants avant de fermer la boîte contenant.

InformationsquelleAutor Abram Simon

5

Un peu d'autres options pour la compensation des flotteurs ici:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Quant à la meilleure façon de le faire, c'est presque une guerre sainte, les puristes freak sur les extra div, si vous n'êtes pas peur d'un peu plus de balisage, l'ajout de la zone dégagée div comme suggéré par Josué et AJ fonctionnera très bien, et est une technique fiable, mais il y a au moins 17 autres façons de le faire...

InformationsquelleAutor seanb
4

ajoutez le code suivant après votre ul:
```
<div style="clear: both"></div> 
```
InformationsquelleAutor
2

Essayer le flottant contenant l'élément à gauche.

InformationsquelleAutor dylanfm
2

Ne vous embêtez pas avec la compensation d'éléments ou de débordement. Ajouter cette:
```
#nav {
    float: left;
}
```
Lorsque vous flotter le LI, le #nav plus "contient" rien, alors qu'il s'effondre. Mais si le #nav est proposé également, elle contient tout ce flottait à l'intérieur, il élargit de nouveau.

(Également envisager de retirer le #nav div et de se contenter d'appliquer les mêmes styles à l'UL.)
- C'est la meilleure réponse. Seulement flotter le div extérieure. Il n'y a pas de raison pour faire flotter les ancres. Mais il est intéressant de mentionner que la question n'est pas d'illustrer la nécessité de flotteur de quoi que ce soit.
InformationsquelleAutor Doug
2

Votre problème est que vous êtes flottant le <A> éléments, mais chacun d'eux est à l'intérieur d'un <LI> élément. LIs afficher comme des blocs par défaut, de sorte que chaque <LI> est de forcer l'enfant <A> pour commencer sur une nouvelle ligne.

Si vous flotter le <LI>s, je pense que vous aurez à résoudre votre problème.
```
#nav #ulListNavi  li  {
    float: left;
}
```
InformationsquelleAutor Mark Nielsen
1

La solution la plus rapide serait d'ajouter overflow:hidden pour effacer le flotteur sur l'élément parent:
```
#nav{overflow:hidden;}
```
InformationsquelleAutor Rima Gerhard

Sans changer votre code HTML:

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

Travaille dans IE8 et FF 3.5

InformationsquelleAutor Chris

Vous devez vous connecter pour publier un commentaire.