如何防止菜单从包装

我一直在建设自己网站的菜单栏，每个我尝试调整浏览器的宽度进行检测时，除了我的菜单只是成为一个列表挤在左边。我尝试加入display: inline-block和white-space: nowrap，但它不起作用。有任何想法吗？如何防止菜单从包装

截图错误： enter image description here

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/

来源

2013-07-29 Andrew

这是只在非台式机大小的设备的问题吗？ –

这画面是我的桌面上，我只是把浏览器和缩小上下的宽度，这是发生了什么事 – Andrew

之所以发生这种情况是因为一旦屏幕宽度充分降低，Foundation使用其备用（小画面）CSS指定最小宽度（或宽度）。由于您没有“小”宽度（只有“大”宽度），Foundation默认情况下会将您的列扩展为100％的宽度。

这可以只用基金会的预定义类来解决，不需要修改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>

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

来源

2013-07-29 19:18:54 Serlite

这似乎这样的伎俩，谢谢！ – Andrew

太棒了！很高兴我能帮忙。 – Serlite

移动div.large-*标签li标签内。
为#header ul

来源

2013-07-29 19:10:16

如何防止菜单从包装

回答

相关问题