2

我一直在尝试使用 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/ 任何帮助将不胜感激，谢谢！

4

3 回答 3

2

改成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;}
于 2013-07-31T07:59:49.127 回答
0

这是因为第一个列表项浮动到右边框。第二个列表项没有获得第一项和右边框之间的空间，因此位于第一项之前，依此类推。

为了克服这个问题，最佳实践是将 ul 浮动到右侧，将 li 浮动到左侧。这将解决问题。

于 2018-07-09T15:05:15.540 回答
0

永远记住，如果你把“浮动”放进去

  • 它将反转菜单的顺序，因此在标签中写入浮点值或将其作为默认排列。

    • 于 2021-05-14T11:31:02.503 回答