CSS水平滾動查詢

所以我想有一個菜單DIV移動水平滾動和我使用http://jsfiddle.net/v2Ypj/，它似乎相當直截了當所以我用CSS水平滾動查詢

.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 任何幫助將不勝感激任何幫助！

來源

2017-02-22 Felicyia

爲什麼地球上，你會希望它做這個？爲什麼不用flexbox包裝它並使其實際響應？ – Option

@Option真的！ –

從來沒有聽說過flexbox – Felicyia

我在督察發揮各地，並用此溶液想出了：

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

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

你的寬度設定爲硬像素量（700像素）。通過將寬度設置爲100％，可以使內容正常溢出。 A標籤的樣式可以從包裝中改變鏈接，從而使區域可以滾動。

我建議把上述樣式放在媒體查詢中。

來源

2017-02-22 16:06:41 jleggio

這10000％的工作！謝謝！我想我必須設置區域，否則它將採用100％寬度作爲屏幕寬度，然後溢出-y。這是我設置硬700px。再次感謝！ – Felicyia

你可以試試這個，希望這將有助於

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

來源

2017-02-22 16:23:52

CSS水平滾動查詢

回答

相關問題