ブラウザのウィンドウが縮小されたときに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 li"は必要ありません。あなたのコードに付随するもう一つの問題は、#menuの絶対的な位置付けがxスクロールを妨げることです。もしスクロールバーを削除しなければならないのであれば。

実例はjfiddleを参照してください。

しかし、もっと慣れているように見えるのは、メニュー上の醜いスクロールバーを避け、小さな画面では折りたたむことができるようにすることです。 W3 Schoolsにはデモがあります。