Je veux créer une barre NAV avec des images sur chaque extrémité pour le rendre purty.
Donc, j'ai créé le HTML et le CSS ci-dessous et cela a fonctionné super. Mes éléments de menu sont dans une liste UL / LI.
Lorsque je styte la liste pour mettre les articles tous sur une ligne, les images des extrémités disparaissent. Quoi de neuf avec ça? Comment puis-je le réparer?
Le coupable est flottant: à gauche; ci-dessous.
--- test.html --- --- test.css --- Les images sont différentes, de sorte que le HTML / CSS peut être copié collé pour le tester. Quel est l'accord? Qu'est-ce que je fais mal?
4 Réponses :
Avec uniquement des enfants flottés, votre conteneur externe retournera une hauteur de 0px. En tant que tel, vous pouvez placer les éléments suivants immédiatement après l'élément flotté (s): et ajouter les règles suivantes: p> pour Exemple: P> <div id="container">
<div id="header-usernav" class="span-6 last large">
<div id="header-usernav-leftside">
<div id="header-usernav-rightside">
<ul>
<li>Register</li>
<li>Signin</li>
<li>Signout</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
Cela ne semble pas fonctionner dans Safari et Firefox sur Mac OS. JSBIN.com/ikige . Le nettoyage div doit être immédiatement après l'UL
Bien que cette technique fonctionne, la plupart des gens utiliseraient une variante de Clearfix ces jours-ci, car il ne nécessite pas d'ajouter un balisage supplémentaire - voir les anwsers de Chetan ou Sasha.
Cela se passe parce que vos divs n'ont aucune hauteur. Vous pouvez ajouter un DIV vide avec clair: immédiatement après votre UL. Ou vous pouvez ajouter ces styles à UL
Ajouter un hauteur: 28px; à votre ul dans votre CSS. Jonathan et Chetan ont déjà donné une très bonne explication de la raison pour laquelle cela fonctionne, mais de réitérer, les parents d'éléments flottés ne sont pas affectés par la hauteur de leurs enfants flottés.
Je recommanderais d'ajouter un débordement: caché; (et zoomer: 1; pour maintenir la compatibilité des navigateurs croisés pour IE6) au conteneur div au lieu d'ajouter une DIV de compensation. Clear ajoute BLOAT à votre code source.
#container #header-usernav ul {
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
overflow: hidden;
zoom: 1;
height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}