CSS - 仅显示固定宽度和高度 div 的水平滚动条答案

【问题标题】：CSS - Show only Horizontal Scroll bar for a fixed width and height divCSS - 仅显示固定宽度和高度 div 的水平滚动条
【发布时间】：2011-11-08 10:40:08
【问题描述】：

我有一个固定宽度和高度的 div：

 #containersimg
 {
    width: 900px;
    height: 135px;
 }

我里面有很多图片，宽度为 90 像素，高度为 120 像素。所以我想把我的图片全部排成一行，并且只显示水平滚动条来滚动图片。

我需要在 FF 和 IE8 及更高版本中进行这项工作。我尝试了overflow-x和overflow-y，但没有帮助。

有什么想法吗？？希望能在这里得到一些帮助...谢谢...

【问题讨论】：

标签： css scrollbar overflow

【解决方案1】：

你需要在你的滚动容器中包含一个 div 来确保它们不受宽度的限制，然后在容器上设置overflow-x: scroll。我已经模拟了一个快速小提琴来演示。 http://jsfiddle.net/vUEYG/

【讨论】：

+1 很好，但我认为最好给.square display:inline-block 并删除float:left。然后给.wrapper white-space:nowrap 并从中删除width。这样，包装器的宽度就不会被限制为 500px。在这里：jsfiddle.net/WbVp3
这实际上更有意义。我已经根据您的建议更新了小提琴 - 还将方形 div 更改为跨度，以确保 IE 使用 inline-block 正确处理它们。 jsfiddle.net/vUEYG/2
嗨，非常感谢。但由于某些原因，我无法更改 html 构造......任何想法在不添加 div 的情况下做到这一点？谢谢..
您现在实际上可能会丢失包装器 div，只需在该 jsfiddle.net/vUEYG/3 上设置 white-space:nowrap
很高兴我们一起找到了完美的解决方案 :)

【解决方案2】：

试一试:)

-ms-overflow-x: hidden;

取自这个伟大的资源CSS div element - how to show horizontal scroll bars only?

【讨论】：

您能否将您的代码放入 JS fiddle 中：) 这将使我们能够提供更好的帮助 :)
嗨，这里是：jsfiddle.net/yenni104/rTjmc 从上面发布的答案中得到了解决方案，仍然非常感谢！

【解决方案3】：

你可以添加第一个溢出：自动

#containersimg
 {
    width: 900px;
    height: 135px;
overflow:auto;
overflow-x:hidden;


 }

可以帮到你

【讨论】：