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

我有一个div容器，其定义如下：

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

填充此div包含的表格后，这将自动为我提供水平和垂直滚动条。我只希望仅水平滚动条自动显示。我将以编程方式修改桌子的高度。

我该怎么做呢？

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

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

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

overflow: auto;
overflow-y: hidden;

您可能还需要为IE8添加：

-ms-overflow-y: hidden;

由于Microsoft威胁要在IE8标准模式下将所有CR之前的标准属性移动到自己的“ -ms”框中。（如果他们总是那样做的话，这是有道理的，但是对现在的每个人来说都是不便。）

另一方面，IE8完全有可能反正已修复了该错误。

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

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

同时显示：

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

您也可以这样做，overflow: auto并以这种方式给出最大的固定高度和宽度，当文本或其中的任何内容溢出时，它只会显示所需的滚动条

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

不要忘记为容器和内部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/（不适用于上面的代码）

使用以下

<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溢出；即时通讯