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宽度即可。

如果你想要一个带水平滚动的200px div，那么将'display：inline'添加到你的列表项中，并将'overflow：auto'和'white-space：nowrap'添加到div。

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

Answer 2

如何在一行中设置所有图像

将display:inline应用于li。

并且只在div中显示它们的前200px？

将width:200px和overflow:hidden应用到div。

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

2 个答案: