如何使溢出和浮动定位的元素保持在一行上？答案

【问题标题】：how do I make overflowing and float positioned elements stay all on one line?如何使溢出和浮动定位的元素保持在一行上？
【发布时间】：2011-08-29 06:03:47
【问题描述】：

<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 的要点，目前自动滚动创建了一个仅垂直的滚动条。我想让它创建一个仅水平滚动条，我该怎么做？

【问题讨论】：

标签： css scrollbar overflow

【解决方案1】：

您必须将所有图像的宽度添加到您的ul。另见我的jsfddle。

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

【讨论】：

【解决方案2】：

在同一问题上找到以前的帖子之一。

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

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

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

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

-ms-overflow-y：隐藏；因为微软威胁要在 IE8 标准模式下将所有 pre-CR-standard 属性移动到他们自己的“-ms”框中。（如果他们一直这样做的话，这是有道理的，但现在对每个人来说都是一种不便。）

另一方面，IE8 完全有可能修复了这个错误。”

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

【讨论】：

【解决方案3】：

添加：

#wrapper ul {
   height: 55px;
}

你做错了什么，没有元素可以创建水平滚动条。所以你必须创建一个。 UL 元素非常适合。

【讨论】：