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

如何在一行中设置所有图像并在div内只显示其中的第一个200像素？
不打破布局，或移动图像到下一行。
online demo 在较短的div内在一行显示图像

<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; 
}

来源

2010-04-03 nemiss

您的div宽度会缩短 - 如果您事先知道图像大小和数量，只需修复div宽度即可。

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

如果您事先不知道尺寸和/或数量，但是您希望无论如何都将该列表展开为单行，则可能需要使用表格。

来源

2010-04-03 14:38:28 Ray

我做了短小的div为了滚动thr图像里面。所以它一定很短。 – nemiss 2010-04-03 14:41:53

然后我的第二个建议应该适合你。您可以将这些样式应用于div或ul，具体取决于您希望在最终设计中看起来如何。 – Ray 2010-04-03 14:45:20

如果我设置'overflow：auto'它可以工作，但是我得到了水平滚动条 - 我不想要它，因为我将使用javascript滚动 – nemiss 2010-04-03 14:45:38

如何设置的所有图像线

应用display:inline您li秒。

并只显示其中的第一个200px的div？

应用width:200px和overflow:hidden您div。

来源

2010-04-03 14:29:26

不，没有工作。你可以在网上测试它， http://www.webdevout.net/test?01i&raw – nemiss 2010-04-03 14:35:36

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

回答

相关问题