css - 如何防止菜单换行

Question

我一直在为我的网站构建一个菜单栏，但每次我尝试调整浏览器宽度进行测试时，我的菜单都会变成一个列表，挤在左侧。我尝试添加 display: inline-block 和 white-space: nowrap 但它不起作用。有任何想法吗？

错误截图:

HTML:

 <div id="header" class="row">  
     <ul class="nav-bar">
                <div class="large-2 columns"><li data-slide="1"><a href="">home</a></li></div>                      
                <div class="large-3 columns"><li data-slide="2"><a href="">portfolio</a></li></div>
                <div class="large-2 columns"><li class="logo"><img src="images/logo.png" /></li></div>
                <div class="large-2 columns"><li data-slide="3"><a href="">about</a></li></div>
                <div class="large-3 columns"><li data-slide="4"><a href="">contact</a></li></div>
            </ul>
</div>

CSS:

div#header {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    color: #FFF;
    /*position: relative;*/
    top: 0;
}
div#header ul{
    height: 128px;
    list-style-type: none;
    white-space: nowrap;
}
div#header ul li {
    display: inline-block;
    background-color: #003264;  
    text-align: center;
    height: 128px;
    line-height: 128px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    font-size: 36px;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

网站:http://andrewgu12.kodingen.com/

Answer 1

发生这种情况的原因是一旦屏幕宽度充分减小，Foundation 就会使用其替代(小屏幕)CSS。由于您没有“小”宽度(只有“大”宽度)，默认情况下 Foundation 会将您的列扩展到 100% 的宽度。

这可以只使用 Foundation 的预定义类来解决，不需要修改 CSS。对于您的 .nav-bar 子级，只需指定一个“小”宽度即可。

<ul class="nav-bar">
    <div class="large-2 small-2 columns"><li data-slide="1"><a href="">home</a></li></div>                      
    <div class="large-3 small-3 columns"><li data-slide="2"><a href="">portfolio</a></li></div>
    <div class="large-2 small-2 columns"><li class="logo"><img src="images/logo.png" /></li></div>
    <div class="large-2 small-2 columns"><li data-slide="3"><a href="">about</a></li></div>
    <div class="large-3 small-3 columns"><li data-slide="4"><a href="">contact</a></li></div>
</ul>

这似乎解决了我的问题。如果这不是您想要的，请随时告诉我，我很乐意进一步提供帮助。祝你好运!