在較短的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內在一行顯示圖像

回答

相關問題