CSS div元素 – 如何只显示水平滚动条？
我有一个div容器，并已定义其风格如下：
div#tbl-container { width: 600px; overflow: auto; scrollbar-base-color:#ffeaff } 这一次给我的水平和垂直滚动条自动一旦我填充我的这个div包含的表。 我只想要水平滚动条自动出现。 我将以编程方式修改表格的高度。
我如何做到这一点？
除非您使内容足够大以便需要它们，否则不应该同时获得水平和垂直滚动条。
但是，你通常在IE中由于一个错误。 检查其他浏览器（Firefox等），以确定它是否实际上只有IE正在这样做。
IE6-7（以及其他浏览器）支持build议的CSS3扩展来独立设置滚动条，您可以使用它来抑制垂直滚动条：
overflow: auto; overflow-y: hidden;
您可能还需要添加IE8：
-ms-overflow-y: hidden;
因为微软威胁要将所有的CR标准之前的属性转移到IE8标准模式下的“-ms”框中。 （如果他们总是这样做的话，这是有道理的，但是现在对每个人来说都是一个不便。）
另一方面，IE8完全有可能修复这个bug。
我还必须添加white-space: nowrap; 这种风格，否则元素将包裹到我们正在删除能力滚动到的区域。
为了显示两者：
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;"> </div>
隐藏X轴：
<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"> </div>
隐藏Y轴：
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"> </div>
这个解决scheme没有父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 }
看看DEMO
你也可以使它overflow: auto并给出一个最大固定的高度和宽度的方式，当文本或任何在那里溢出它只会显示所需的滚动条
我使用CSS属性：1）“ overflow-x: auto ”; 2）“ overflow-y: hidden ”; 3）“ white-space: nowrap ”;
不要忘记为容器和内部DIVS组件设置宽度。 属性“white-space：nowrap”允许内部的DIVS不会落在不同的行上。
考虑以下HTML：
<div class="container"> <div class="inner-1"></div> <div class="inner-2"></div> <div class="inner-3"></div> </div>
我使用下面的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 */ }
小提琴： https ： //jsfiddle.net/qrjh93x8/ （不使用上面的代码）
使用以下内容
<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;"> <table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
.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; }
CSS3具有overflow-x属性，但我不期望对此有很好的支持。 在CSS2中，所有你可以做的就是设置一个普通的scroll策略，并且工作你的widths和heights不要搞乱它们。
我们应该设置为overflow: auto并隐藏一个我们不用于处理不支持的CSS3浏览器的滚动条。 看看这个CSS溢出; XME.im
