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

Answer 2

之所以发生这种情况，是因为第一个列表项浮动到右边界。第二个列表项在第一个项目和右边框之间没有空格，因此位于第一个项目之前，依此类推。

为了克服此问题，最佳做法是

将ul浮动到右侧，将li浮动到左侧。这样可以解决问题。

Answer 3

永远记住如果你把'float'放在

它会颠倒菜单的顺序，所以在标签或main中写入浮动值作为默认的排列。

菜单以相反的顺序出现

3 个答案: