Question

可能重复：
CSS - use a horizontal scrollbar only

我仍然相对较新使用HTML，但我正在尝试制作一个布局，我想要一个宽度为370px×199px的div作为高度，我只想拥有水平滚动条。

这是我正在使用的代码。

<div class="camodule" style="position: absolute; left: 727px; top:202px; width: 370px; height:199px; overflow: auto;"> 
    Images that go here are (h)199px by (w)119px
</div>

我需要更改为有水平滚动条吗？

[编辑] 我应该说我有不同尺寸的盒子，只想让两个盒子水平滚动。我想要（h）199px（w）119px的照片让它们一起流动，我试图通过将多个图像（6）放在彼此旁边来修复它。但是当我查看内容时，它只显示我放入div中的6个图像中的3个。

这是整个代码，我试图用它来滚动所有内容，比如用6个图像等。

这是我目前正在使用的代码exact code，正如您所看到的那样，它无效。我希望它只有两个盒子的滚动条，而不是我有不同尺寸的所有盒子。我已经看到了我想要实现的目标，所以我知道它必须如何工作。

Answer 1

您需要将内部潜水设置为比外部div更长，然后单独设置overflow-x和overflow-y属性（同时删除现有的溢出规则）。

<强> jsFiddle example

<div class="camodule" style="position: absolute; left: 10px; top:10px; width: 370px; height:199px;-ms-overflow-x: auto; overflow-x: auto;overflow-y:hidden;-ms-overflow-y: hidden; "><div style="width:1000px">Your long content here.</div></div>

Answer 2

HTML

<div class="camodule" style="overflow-x: hidden; overflow-y: scroll; position: absolute; left: 727px; top:202px; width: 370px; height:199px;"></div>

属性overflow-x控制水平滚动，overflow-y控件垂直。

在样式表中使用CSS或使用样式标记也更容易：

.camodule {    
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    left: 727px;
    top:202px;
    width: 370px;
    height: 199px;    
}

Answer 3

您应该将CSS切换为外部样式表。 Example here

HTML

<div class="camodule">
    <div class="camoduleContent">
        Content That Scrolls
    </div>
</div>

CSS

.camodule{
    position: absolute;
    left: 10px;
    top:10px;
    width: 370px;
    height:199px;
    -ms-overflow-x: auto;
    overflow-x: auto;
    overflow-y:hidden
}
.camoduleContent{
    width:1000px;
}

Answer 4

您应该可以将溢出更改为overflow-x: scroll; overflow-y: hidden;某些浏览器可能仍会显示y滚动但是它会变灰。

我需要帮助尝试使div只有水平滚动条

4 个答案: