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; 
 
}

работал прокруткой только этого div по вертикали (до тех пор, пока я не понял, что мне нужно изменить ширину), но по какой-то причине он не будет работать горизонтально. бар даже не появляется. вот сайт, на котором я тестирую. 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; 
}