CSS div元素-如何显示水平滚动条只?

我有一个div容器，并定义了它的风格如下:

div#tbl-container
{
width: 600px;
overflow: auto;
scrollbar-base-color:#ffeaff
}
这给了我水平和垂直滚动条自动一旦我填充我的表，这是包含在这个div。 我只希望水平滚动条自动出现。我将通过编程的方式修改表的高度

我怎么做呢?

547023 次浏览
小开

CSS3有overflow-x属性，但我不期望对它有很大的支持。在CSS2中，你所能做的就是设置一个通用的scroll策略，并使用你的widths和heights不要把它们弄乱。

小开
最佳答案

您不应该同时获得水平和垂直滚动条，除非您将内容设置得足够大。

但是你通常在IE中因为一个bug而这样做。检查一下其他浏览器(火狐等)，看看是不是只有IE在这样做。

IE6-7(包括其他浏览器)支持提议的CSS3扩展来独立设置滚动条，你可以使用它来抑制垂直滚动条:

overflow: auto;
overflow-y: hidden;

你可能还需要为IE8添加:

-ms-overflow-y: hidden;

因为微软威胁要在IE8标准模式中将所有pre- cr标准属性转移到他们自己的“-ms”框中。(如果他们一直这样做的话，这是有道理的，但现在对每个人来说都很不方便。)

另一方面，IE8完全有可能已经修复了这个bug。

小开

你也可以将它设置为overflow: auto，并给出一个固定的最大高度和宽度，这样当文本或其他内容溢出时，它将只显示所需的滚动条

小开

同时显示两者:

<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>
小开

我还必须将white-space: nowrap;添加到样式中，否则元素将被包装到我们要删除滚动能力的区域。

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

小开 
.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; }
小开

使用以下方法

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
小开

这个解决方案是没有父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
}

看看演示

小开
我使用CSS属性: 1)“overflow-x: auto”; 2)“overflow-y: hidden”; 3)“white-space: nowrap”;< / p >

不要忘记为容器和内部DIVS组件设置Width。属性"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/(不与上述代码一起工作)


提交答案