2010-06-16 3 views
0

J'utilise une liste non ordonnée CSS pour créer une barre de navigation de site, en utilisant display: inline, display: block et float: left. L'élément suivant que je mets après la barre de navigation est placé à droite de celui-ci. Comment puis-je aligner l'élément suivant afin qu'il soit affiché ci-dessous?Comment puis-je obtenir l'élément après que ma barre de navigation horizontale CSS s'affiche en dessous?

Le html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 
    <head> 
    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" /> 
    </head> 

    <body> 
    <div> 
     <ul class="nav"> 
     <li class="nav"><a class="nav" href="#">One1</a></li> 
     <li class="nav"><a class="nav" href="#">Two</a></li> 
     <li class="nav"><a class="nav" href="#">Three</a></li> 
     <li class="nav"><a class="nav" href="#">Four</a></li> 
     </ul> 
    </div> 

    <div><h2>Heading</h2></div> 
    </body> 
</html> 

Le css:

ul.nav, ul li.nav { 
    display: inline; 
    margin: 0px; 
    padding: 0px; 
} 

ul.nav { 
    list-style-type: none; 
} 

li.nav { 
    display: block; 
    float: left; 
    background-color: red; 
} 

a.nav { 
    background-color: green; 
    padding: 10px; 
    margin: 0px; 
} 

a:hover.nav { 
    background-color: gray; 
} 

Répondre

2

Essayez d'utiliser clear: left; sur la div après votre liste. Cela devrait alors effacer l'élément pour apparaître au-dessous de votre liste non ordonnée.

Edit: devrait effectivement lire clear: left; bien que l'utilisation clear: both; travaillera également

0

Utiliser un flotteur clair et la taille et la position du titre div dessous. Si vous lui donnez une largeur plus grande que l'espace situé à droite de la barre de navigation, il devrait automatiquement être déroulé.

CSS:

.clear { clear:both; } 
#heading { position:relative; margin:0px auto; width:980px; } 

HTML après nav:

<div class="clear"></div>  
<div id="heading">Heading</div> 
Questions connexes