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

Posted 2023-04-13

【中文标题】CSS div 元素 - 如何只显示水平滚动条？

【英文标题】：CSS div element - how to show horizontal scroll bars only?

【发布时间】：2010-09-20 11:28:25

【问题描述】：

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

div#tbl-container 

    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff

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

我该怎么做？

【参考方案1】：

你不应该同时使用水平和垂直滚动条，除非你的内容足够大以需要它们。

但是，由于错误，您通常在 IE 中执行此操作。检查其他浏览器（Firefox 等），看看实际上是否只有 IE 这样做。

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

overflow: auto;
overflow-y: hidden;

您可能还需要为 IE8 添加：

-ms-overflow-y: hidden;

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

另一方面，IE8 完全有可能修复了这个错误。

【讨论】：

天哪，你拯救了我的一天！虽然我还没有尝试过 ie-8 规范。现在可以了 FF 和 IE-7。这就是我所需要的。再次感谢！

其实用overflow-x而不是overflow会更好。

【参考方案2】：

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

【讨论】：

white-space: nowrap; 是关键，没有它你的元素会堆叠/包装。

white-space: nowrap 似乎不适用于 firefox safari 或 chrome，即使我在 div 显示中的图像：内联或作为块

【参考方案3】：

此解决方案没有父 div 的高度/宽度规范，因此它将响应调整窗口大小，并且最有用的原因是水平滚动条会在需要时出现。 p>

.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

【参考方案4】：

同时显示：

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

【参考方案5】：

您也可以将其设为overflow: auto 并以这种方式提供最大固定高度和宽度，当文本或其中的任何内容溢出时，它将仅显示所需的滚动条

【参考方案6】：

我使用 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/（不适用于上述代码）

【讨论】：

我添加了空白，但我的不起作用：jsfiddle.net/jjq4xgz5/1。谢谢。

【参考方案7】：

使用下面的

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

【参考方案8】：

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

【讨论】：

请解释你的答案。

【参考方案9】：

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

【参考方案10】：

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