當瀏覽器窗口縮小時，CSS水平菜單換行

Question

當瀏覽器窗口最大化時，我有一個水平菜單，但當我收縮瀏覽器窗口或手機上的查看頁面時，菜單項會換行。我嘗試過所有例子，但都沒有成功。

HTML：

<div id="menu"> 
    <ul> 
     <li><a href="index.html" accesskey="1" title="">Homepage</a></li> 
     <li class="current_page_item"><a href="#" accesskey="2" title="">FAQ</a></li> 
     <li><a href="AboutUs.html" accesskey="3" title="">About Us</a></li> 
     <li><a href="Policies.html" accesskey="4" title="">Policies</a></li> 
     <li><a href="ContactUs.html" accesskey="5" title="">Contact Us</a></li> 
     <li><a href="Strategies.html" accesskey="6" title="">Strategies</a></li> 
     <li><a href="Testimonials.html" accesskey="7" title="">Testimonials</a></li> 
     <li><a href="Tutorial.html" accesskey="8" title="">Tutorial</a></li> 
    </ul> 
</div> 

CSS：

#menu 
{ 
    position: absolute; 
    right: 0; 
    top: 0; 
    overflow-x:scroll; 
} 

#menu ul 
{ 
    display: inline-block; 
} 

#menu li 
{ 
    display: block; 
    float: left; 
    text-align: center; 
} 

#menu li a, #menu li span 
{ 
    display: block; 
    padding: 0em 1.5em; 
    height: 150px; 
    letter-spacing: 0.20em; 
    line-height: 150px; 
    text-decoration: none; 
    font-size: 0.90em; 
    font-weight: 600; 
    text-transform: uppercase; 
    outline: 0; 
    color: #ACCFFF; 
} 

Answer 1

你需要給菜單包裝器的最小寬度，像min-width: 1225px; 看到這個jsfiddle。

Answer 2

按本previous question所做的以下變化：

#menu ul{white-space: nowrap;} 
#menu li{display: inline-block;} 

的 「浮動：左;」在「#menu李」是沒有必要的。你的代碼的另一個問題是#menu的絕對位置阻止了X滾動，所以如果你真的想要一個滾動條，必須刪除。

查看此jfiddle作爲一個工作示例。

但是，似乎更爲人們接受的做法是避免菜單上醜陋的滾動條，並使菜單可摺疊以用於較小的屏幕。 W3 Schools有一個演示。