試圖迫使一個DIV有一個水平滾動條通過CSS

我想使一個具有設置寬度（330px）和設置高度（100px）縮略圖的div，並使其內容水平排列，所以使用水平滾動條查看內容。試圖迫使一個DIV有一個水平滾動條通過CSS

請參閱我的網站的右下角縮略圖行：http://stevenlloydarchitecture.co.nz/building.html

我想要讓這個只有四個縮略圖是可見的，你水平滾動看到其他人。

但是，當我嘗試指定寬度時，縮略圖會相互移動（如當前所顯示的）。我試着製作一個父div（在我的例子中使用id「slider」）來設置寬度和高度，並嘗試儘可能多的指定寬度，高度和溢出的組合，希望強制水平滾動但沒有任何東西工作，我完全難住。預先感謝任何提示。

來源

2013-02-25 Sceneman

你可以試試下面的CSS：

#slider { 
width: 330px; 
overflow-x: scroll; 
overflow-y: hidden; 
} 

#thumbset { 
width: 550px;// whatever width you want 
}

來源

2013-02-25 06:07:00

完美！非常感謝。奇妙的作品。 – Sceneman 2013-02-25 06:13:53

歡迎現場！ – 2013-02-25 06:14:56

您可以將以下樣式添加到#slider div以獲取滾動瀏覽圖像的水平滾動條。之後，它的大小和定位爲div。 white-space: nowrap屬性告訴圖像不要換行到下一個「行」。

#slider { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

#thumbset { 
    overflow: visible; 
}

來源

2013-02-25 06:02:26 RJo

感謝您的回答！我會嘗試「nowrap」的一部分。 – Sceneman 2013-02-25 06:14:34

使用此代碼：

<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px"> 
    Here's a random text ............. 
</div>

看到這個代碼是如何工作在這個小提琴，這是一個簡單的方法：add horizontal scroll bar

來源

2015-08-12 14:13:35 Babel

試圖迫使一個DIV有一個水平滾動條通過CSS

回答

相關問題