Question

<div id='wrapper'>
   <ul>
      <li><img src='1.jpg' /></li>
      <li><img src='2.jpg' /></li>
      <li><img src='3.jpg' /></li>
      <li><img src='4.jpg' /></li>
      <li><img src='5.jpg' /></li>
   </ul>
</div>

#wrapper {
   width: 300px;
   height: 55px;
   overflow: auto;
}
li {
   float: left;
}

上面是我的html和css的要点，目前自动滚动创建一个垂直的滚动条。我想这样做它创建一个水平的滚动条，我该怎么做？

Answer 1

找到同一问题的上一篇文章之一。

“你不应该同时获得水平和垂直滚动条，除非你让内容足够大以至于需要它们。

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

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

溢出：自动; 溢出y：隐藏; 您可能还需要为IE8添加：

-ms-overflow-y：hidden; 因为微软威胁要在IE8标准模式下将所有CR前标准属性移动到他们自己的'-ms'框中。（如果他们总是以这种方式做到这一点会有意义，但现在对每个人来说都是一种不便。）

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

CSS div element - how to show horizontal scroll bars only?

Answer 2

您必须将所有图片的宽度添加到ul。另请参阅我的jsfddle。

#wrapper ul {
   width: 2000px; /* if the sum of all images widthes is 2000px */
}

Answer 3

添加：

#wrapper ul {
   height: 55px;
}

你做错了，就是没有任何元素会创建水平滚动条。所以你必须创建一个。 UL元素非常适合。

如何使溢出和浮动定位元素保持在一条线上？

3 个答案: