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策略,并且工作你的widthsheights不要搞乱它们。

我们应该设置为overflow: auto并隐藏一个我们不用于处理不支持的CSS3浏览器的滚动条。 看看这个CSS溢出; XME.im