CSS - 仅显示固定宽度和高度 div 的水平滚动条

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8049141/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:06:36  来源:igfitidea点击:

CSS - Show only Horizontal Scroll bar for a fixed width and height div

cssscrollbaroverflow

提问by shennyL

I got a div which is of fixed width and height:

我有一个固定宽度和高度的 div:

 #containersimg
 {
    width: 900px;
    height: 135px;
 }

And I have many images inside, with width 90px and height 120px. So i want to have my images all in a row, and show only horizontal scroll bar to scroll through the images.

我里面有很多图像,宽度为 90 像素,高度为 120 像素。所以我想让我的图像全部排成一行,并且只显示水平滚动条来滚动图像。

I need to make this work in both FF and IE8 and above. I tried the overflow-x and overflow-y but I didn't helped.

我需要在 FF 和 IE8 及更高版本中进行这项工作。我尝试了溢出-x 和溢出-y,但我没有帮助。

Any idea?? Hope can get some help here... thanks...

任何的想法??希望能在这里得到一些帮助...谢谢...

回答by extols

You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scrollon the container. I've mocked up a quick fiddle to demonstrate. http://jsfiddle.net/vUEYG/

您需要在滚动容器内包装一个 div,以确保它们不受宽度的限制,然后overflow-x: scroll在容器上进行设置。我模拟了一个快速小提琴来演示。http://jsfiddle.net/vUEYG/

回答by Graeme Leighfield

Give this a go :)

试一试:)

-ms-overflow-x: hidden;

Taken from this great resource CSS div element - how to show horizontal scroll bars only?

取自这个很棒的资源CSS div 元素 - 如何仅显示水平滚动条?

回答by Rashmi Kant

you can add first overflow:auto

您可以添加第一个溢出:自动

#containersimg
 {
    width: 900px;
    height: 135px;
overflow:auto;
overflow-x:hidden;


 }

may help you

可能会帮助你