html - 菜单以相反顺序出现

Question

我一直在尝试使用 Foundation 为我的网站构建导航栏。但是，在我尝试过之后，菜单栏中的元素现在以相反的顺序出现。在右侧，不是说“关于联系的投资组合”，而是说“关于投资组合的联系”。有什么想法吗？

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;
}

网站:http://andrewgu12.kodingen.com/任何帮助将不胜感激，谢谢!

Answer 1

将 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;
}

并将float:right添加到ul

div#header ul{float:right;}