Html CSS div 元素 - 如何仅显示水平滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/258372/
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
CSS div element - how to show horizontal scroll bars only?
提问by Julius A
I have a div container and have defined its style as follows:
我有一个 div 容器并定义了它的样式如下：
div#tbl-container
{
width: 600px;
overflow: auto;
scrollbar-base-color:#ffeaff
}
This gives me both horizontal and vertical scroll bars automatically once I populate my table which is contained by this div. I just want only horizontal scroll bars to appear automatically. I will modify the height of the table programmatically.
一旦我填充了这个 div 包含的表格，这会自动为我提供水平和垂直滚动条。我只想自动出现水平滚动条。我将以编程方式修改表格的高度。
How do I do this?
我该怎么做呢？
回答by bobince
You shouldn't get both horizontal and vertical scrollbars unless you make the content large enough to require them.
您不应该同时获得水平和垂直滚动条，除非您使内容足够大以需要它们。
However you typically do in IE due to a bug. Check in other browsers (Firefox etc.) to find out whether it is in fact only IE that is doing it.
但是，由于错误，您通常会在 IE 中执行此操作。检查其他浏览器（Firefox 等）以了解是否实际上只有 IE 正在执行此操作。
IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:
IE6-7（在其他浏览器中）支持提议的 CSS3 扩展来独立设置滚动条，您可以使用它来抑制垂直滚动条：
overflow: auto;
overflow-y: hidden;
You may also need to add for IE8:
您可能还需要为 IE8 添加：
-ms-overflow-y: hidden;
as Microsoft are threatening to move all pre-CR-standard properties into their own ‘-ms' box in IE8 Standards Mode. (This would have made sense if they'd always done it that way, but is rather an inconvenience for everyone now.)
因为微软威胁要在 IE8 标准模式下将所有 pre-CR-standard 属性移动到他们自己的“-ms”框中。（如果他们总是这样做的话，这会是有道理的，但现在对每个人来说都是不便。）
On the other hand it's entirely possible IE8 will have fixed the bug anyway.
另一方面，无论如何，IE8 完全有可能修复了该错误。
回答by Hoby
I also had to add white-space: nowrap;to the style, otherwise elements would wrap down into the area that we're removing the ability to scroll to.
我还必须添加white-space: nowrap;到样式中，否则元素会卷入我们正在移除滚动功能的区域。
回答by Marco Allori
This solution is without height/width specification for the father divso it will be responsiveto window resizing and most useful cause horizontal scrollbars appears just if needed.
此解决方案没有父 div 的高度/宽度规范，因此它将响应窗口大小调整，并且最有用的原因是仅在需要时出现水平滚动条。
.container{
padding:20px;
border:dotted 1px;
white-space:nowrap;
overflow-x:auto;
}
.box{
width:100px;
height:180px;
background-color: red;
margin:10px;
display:inline-block
}
Take a look at DEMO
看看DEMO
回答by Dinesh Appuhamy
To show both:
要同时显示：
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;"> </div>
Hide X Axis:
隐藏 X 轴：
<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"> </div>
Hide Y Axis:
隐藏 Y 轴：
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"> </div>
回答by Tsundoku
you can also make it overflow: autoand give a maximum fixed height and width that way, when the text or whatever is in there, overflows it'll show only the required scrollbar
您也可以制作它overflow: auto并以这种方式提供最大固定高度和宽度，当文本或其中的任何内容溢出时，它只会显示所需的滚动条
回答by Amélie Medem
I use the CSS properties :
1) "overflow-x: auto";
2) "overflow-y: hidden";
3) "white-space: nowrap";
我使用 CSS 属性：1）“ overflow-x: auto”；2) " overflow-y: hidden"; 3) " white-space: nowrap";
Don't forget to set a Width, both for the container and inner DIVS components. The property "white-space : nowrap"allows the inner DIVS not to drop on a different line.
不要忘记为容器和内部 DIVS 组件设置 Width。属性“white-space : nowrap”允许内部 DIVS 不放在不同的行上。
Considering the following HTML:
考虑以下 HTML：
<div class="container">
<div class="inner-1"></div>
<div class="inner-2"></div>
<div class="inner-3"></div>
</div>
I use the following CSS to have an horizontal scroll only:
我使用以下 CSS 仅进行水平滚动：
.container {
height: 80px;
width: 600px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
height: 60px;
max-width: 250px;
display: inline-block; /* this should fix it */
}
Fiddle: https://jsfiddle.net/qrjh93x8/(not working with the above code)
小提琴：https: //jsfiddle.net/qrjh93x8/（不适用于上述代码）
回答by Anudeep Sharma
Use the following
使用以下
<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
回答by Gareth
CSS3has the overflow-xproperty, but I wouldn't expect great support for that. In CSS2all you can do is set a general scrollpolicy and work your widthsand heightsnot to mess them up.
CSS3具有该overflow-x属性，但我不希望对此提供大力支持。在CSS2 中，您所能做的就是设置一个通用scroll策略并按照自己的方式工作，widths而heights不是将它们弄乱。
回答by joginder
.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}
.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none; width:140px; }
回答by Guest
We should set to overflow: autoand hide a scrollbar which we don't use for working on unsupporting CSS3 browser.
Look at this CSS Overflow; XME.im
我们应该设置overflow: auto并隐藏一个滚动条，我们不使用它来处理不支持的 CSS3 浏览器。看看这个CSS 溢出；XME.im
