html 自动出现水平滚动条,html - CSS div元素 - 如何只显示水平滚动条？

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

我有一个div容器，并定义了它的样式如下：

div#tbl-container

{

width: 600px;

overflow: auto;

scrollbar-base-color:#ffeaff

}

一旦我填充了这个div所包含的表格，这会自动给我水平和垂直滚动条。我只想要自动出现水平滚动条。 我将以编程方式修改表的高度。

我该怎么做呢？

Julius A asked 2019-03-14T04:59:24Z

10个解决方案

259 votes

除非您使内容足够大以满足要求，否则不应同时获得水平和垂直滚动条。

但是，由于存在错误，您通常会在IE中执行此操作 检查其他浏览器(Firefox等)以确定它是否实际上只是IE正在这样做。

IE6-7(以及其他浏览器)支持建议的CSS3扩展来独立设置滚动条，您可以使用它来抑制垂直滚动条：

overflow: auto;

overflow-y: hidden;

您可能还需要为IE8添加：

-ms-overflow-y: hidden;

因为微软威胁要在IE8标准模式下将所有CR前标准属性移动到他们自己的'-ms'框中。 (如果他们总是以这种方式做到这一点会有意义，但现在对每个人来说都是一种不便。)

另一方面，IE8完全有可能修复bug。

bobince answered 2019-03-14T05:00:09Z

71 votes

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

Hoby answered 2019-03-14T05:00:34Z

23 votes

此解决方案没有父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

Marconi answered 2019-03-14T05:01:05Z

22 votes

要显示两者：

隐藏X轴：

隐藏Y轴：

Dinesh Appuhamy answered 2019-03-14T05:01:43Z

14 votes

你也可以把它变成overflow: auto并给出一个最大的固定高度和宽度，当文本或其中的任何内容溢出时它将只显示所需的滚动条

Tsundoku answered 2019-03-14T05:02:07Z

4 votes

我使用CSS属性：1)“overflow-x: auto”;2)“overflow-y: hidden”;3)“white-space: nowrap”;

不要忘记为容器和内部DIVS组件设置宽度。 属性“white-space：nowrap”允许内部DIVS不会掉落在不同的行上。

考虑以下HTML：

我使用以下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/](不使用上面的代码)

Amélie Medem answered 2019-03-14T05:03:00Z

3 votes

使用以下内容

Anudeep Sharma answered 2019-03-14T05:03:25Z

1 votes

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

joginder answered 2019-03-14T05:03:44Z

1 votes

CSS3有overflow-x属性，但我不希望得到很大的支持。 在CSS2中，您所能做的就是设置一般scroll政策并使用您的widths和heights不要弄乱它们。

Gareth answered 2019-03-14T05:04:10Z

0 votes

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

Guest answered 2019-03-14T05:04:37Z