Le menu apparaît dans l'ordre inverse

Question

J'ai essayé de construire une barre de navigation pour mon site web en utilisant Foundation. Cependant, après avoir essayé, les éléments de ma barre de menu apparaissent maintenant dans l'ordre inverse. Sur le côté droit, au lieu de dire "portfolio about contact", il est écrit "contact about portfolio". Des idées ?

HTML :

<div id="header-container">
        <div id="header" class="row">   
            <nav class="nav-bar">
                <ul class="left">
                    <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li>
                </ul>
                <ul class="right">
                    <li data-slide="2" class="portfolio"><a href="">portfolio</a></li>
                    <li data-slide="3" class="about"><a href="">about</a></li>
                    <li data-slide="4" class="contact"><a href="">contact</a></li>
                 </ul>
            </nav>
        </div><!--end header-->
    </div><!--end header-container-->       

CSS :

div#header ul{
    height: 128px;
    list-style-type: none;
}
div#header ul li {
    background-color: #003264;  
    text-align: center;
    height: 128px;
    line-height: 128px;         
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    display: inline;
    padding: 0;
    margin: 0;
}
li.andrewgu {
    width: 200px;
    font-size: 60px;
}
li.portfolio {
    float: right;
    font-size: 30px;
    width: 140px;
}
li.about {
    float: right;
    font-size: 30px;
    width: 110px;
}
li.contact {
    float: right;
    font-size: 30px;
    width: 130px;
}

Site web : http://andrewgu12.kodingen.com/ Toute aide serait appréciée, merci !

Answer 1

Cahnge float:right; à float:left

li.portfolio {
    float: left;
    font-size: 30px;
    width: 140px;
}
li.about {
    float: left;
    font-size: 30px;
    width: 110px;
}
li.contact {
    float: left;
    font-size: 30px;
    width: 130px;
}

et ajouter float:right à ul

div#header ul{float:right;}

Answer 2

Cela est dû au fait que le premier élément de la liste flotte sur le bord droit. Le deuxième élément de la liste n'obtient pas l'espace entre le premier élément et le bord droit, et vient donc avant le premier élément, et ainsi de suite.

Afin de surmonter ce problème, la meilleure pratique consiste à faire flotter les ul à droite et les li à gauche . Cela résoudra le problème.

Answer 3

N'oubliez jamais que si vous mettez "float" dans

• cela va inverser l'ordre du menu, donc écrire la valeur float dans la balise ou dans le main c'est l'arrangement par défaut.