如何防止菜单包装

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

1. 移动div.large-*代码中的li代码。

2. 指定#header ul

的最小宽度（或宽度）

Answer 2

之所以发生这种情况，是因为一旦屏幕宽度充分降低，Foundation就会使用其备用（小屏幕）CSS。因为你没有＆＃34;小＆＃34; width（仅限＆＃34;大＆＃34;宽度），默认情况下，Foundation会将列扩展为100％的宽度。

这可以使用Foundation的预定义类来解决，无需修改CSS。对于您的.nav-bar孩子，只需指定一个＆＃34; small＆＃34;宽度也是如此。

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

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