[Résolu] Menu Horizontal : Utilisation de class:both

Bonjour

Je cherche à faire un menu horizontal, jusque là rien de sorcier
Chaque élément est un flottant (left), ce qui permet de mettre chaque <li> les uns à coté des autres

La question que je me pose régulèrement (et la réponse doit être simple), c'est comment faire un clear:both juste après les menus, sans utiliser un <br style="clear:both"> par exemple vu que le fait de passer à la ligne n'est pas forcément nécessaire

Voici un code d'exemple

<nav id="navig_horiz">
        <ul class="nav2">
                <li><a href="">Accueil</a></li>                    
                <li><a href="">Plan du Site</a></li>                    
                <li><a href="">Mentions légales</a></li>                    
                <li><a href="">Contact</a></li>
         </ul>    
</nav>

L'idée serait donc que juste après le </ul> de ne plus avoir de notion de flottant, sans pour autant rajouter du code html

Bien sur, il y a surement moyen e faire autrement, notamment avec des display table-cell mais je suis plus intéressé par l'idée de résoudre ce mode flottant qui revient dans beaucoup d'autres cas

Merci pour votre aide
FranckJ
Modifié par FranckJ (21 Jun 2014 - 08:14)

salut,
simple comme tu dis et maintes fois évoqué

#navig_horiz:after {content:"";display:block;clear:both}

Tu peux aussi appliquer un "overflow:hidden" sur #navig_horiz. Le mieux encore serait de passer par un "display:inline-block" qui est fait pour.

Parfait, merci