CSS水平スクロールクエリ

Question

は

ので、私は、モバイル用のメニューdivのための水平方向のスクロールを持ってしようとしていると私はhttp://jsfiddle.net/v2Ypj/を使用していますし、それはかなりまっすぐ進むように見えたので、私は

.submenu .right.horizontal { 
 
    height:160px; 
 
    width: 700px !important; 
 
    overflow-x: scroll !important; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
}

を使用しました

それは垂直方向にしかスクロールしませんでした（幅を変更する必要があるとわかるまで）が、何らかの理由で水平方向には動きません。バーは表示されません。ここに私がテストしているウェブサイトがあります。 http://www.embroiderywear.com/test/responsivetest/index2.html 助けていただければ助かります！

Answer 1

私はインスペクタで遊んと、この解決策を考え出した：

.submenu .right.horizontal { 
    width: 100% !important; 
    padding-left: 0px; 
} 

.submenu .right a { 
    display: inline-block; 
    float: none; 
} 

あなたの幅は、ハードピクセル量（700px）に設定しました。幅を100％に設定すると、コンテンツが正しくオーバーフローすることができます。 Aタグのスタイルは、あなたのリンクをラッピングから保護し、領域をスクロール可能にします。

上記のスタイルをメディアクエリに入れることをお勧めします。

Answer 2

あなたはこの地球上

http://jsfiddle.net/vUEYG/

HTML

<div id="containersimg"> 
    <div id="wrapper"> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
    </div> 
</div> 

CSS

#wrapper { 
    width: 500px; 
    height: 110px; 
} 

#containersimg { 
    background-color: #bbb; 
    width: 300px; 
    height: 135px; 
    overflow-x: scroll; 
} 

.square { 
    background-color: #00b; 
    float: left; 
    height: 90px; 
    width: 90px; 
    margin: 5px; 
}