Html 试图通过 CSS 强制 DIV 具有水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15060942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to force a DIV to have a horizontal scrollbar via CSS
提问by Sceneman
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
我正在尝试制作一个带有缩略图的 div，使其具有设置的宽度 (330px) 和设置的高度 (100px)，并使其内容水平排列，以便使用水平滚动条查看内容。
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
请看我网站右下角的那排缩略图：http: //stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
我想让它只显示四个缩略图，您可以水平滚动以查看其他缩略图。
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
但是，当我尝试指定宽度时，缩略图会在彼此下方移动（如当前显示）。我尝试制作一个父 Div（在我的示例中使用 id“slider”）来设置宽度和高度，并尝试了多种指定宽度、高度和溢出到 div 的组合，希望能强制水平滚动，但没有工作，我完全被难住了。提前感谢您的任何提示。
回答by RJo
You can add the following styles to the #sliderdiv to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrapproperty tells the images not to wrap to next "lines".
您可以将以下样式添加到#sliderdiv 以仅获得滚动图像的水平滚动条。之后，它只是调整大小和定位div. 该white-space: nowrap属性告诉图像不要换行到下一个“行”。
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
回答by Sanober Malik
You can try the following css :
您可以尝试以下 css ：
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
回答by Babel
Use this code:
使用此代码：
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar
看看这段代码如何在这个小提琴中工作，这是一个简单的方法：添加水平滚动条
