0

可能重复：
CSS - 仅使用水平滚动条

我对使用 HTML 还是比较陌生，但我正在尝试制作布局，我想要一个宽度为 370px x 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 x (w)119px 的图片并让它们一起流动，我试图通过将多张图片 (6) 并排放置来修复它。但是当我查看内容时，它只显示了我放入 div 的 6 张图片中的 3 张。

这是整个代码，以及我试图用来让它一起滚动的内容，比如 6 张图像等。

这是我目前正在使用的代码确切代码，如您所见，它不起作用。我希望它只有两个框的滚动条，而不是我拥有的所有大小不同的框。我已经看到了我想要实现的目标，所以我知道它必须以某种方式工作。

4

4 回答 4

1

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

jsFiddle 示例

<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>​
于 2012-09-17T01:34:22.507 回答
1

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;    
}
于 2012-09-17T01:42:51.273 回答
1

您可能也应该将您的 CSS 切换为外部样式表。这里的例子。

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

​
于 2012-09-17T01:57:02.860 回答
0

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

于 2012-09-17T01:35:40.120 回答