html - 在较短的 div 中一行显示图像

Question

如何将所有图像设置在一行中并在 div 中仅显示它们的前 200px？
不破坏布局，或将图像移动到下一行。
online demo

<div id="thumbsContainer">
   <ul>
    <li><img src="http://img214.imageshack.us/img214/6030/small3.jpg" alt="" /></li>
    <li><img src="http://img263.imageshack.us/img263/5600/small1ga.jpg" alt="" /></li>
    <li><img src="http://img638.imageshack.us/img638/3521/small4j.jpg" alt="" /></li>
    <li><img src="http://img682.imageshack.us/img682/507/small5.jpg" alt="" /></li>
    <li><img src="
http://img96.imageshack.us/img96/6118/small2o.jpg" alt="" /></li>   
   </ul>
  </div>

#thumbsContainer
{
 width:200px;
 overflow:hidden;

}
ul
{
list-style:none;
}
li
{
float:left;
}

Answer 1

您的 div 宽度太短 - 如果您预先知道图片的大小和数量，只需调整 div 宽度以适应。

如果您想要一个 200 像素的水平滚动 div，请将“display:inline”添加到您的列表项，并将“overflow:auto”和“white-space:nowrap”添加到 div。

如果您事先不知道大小和/或数量，但无论如何都希望列表在一行中展开，那么您可能需要使用表格。