如何防止菜單從包裝

我一直在建設自己網站的菜單欄，每個我嘗試調整瀏覽器的寬度進行檢測時，除了我的菜單只是成爲一個列表擠在左邊。我嘗試加入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

如何防止菜單從包裝

回答

相關問題