css - 如何使溢出和 float 定位的元素都保持在一行中？

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

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

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