HTML/CSS如何自動調整容器的寬度以顯示多個水平顯示的圖像？

Question

我想要在網頁中水平顯示可變數量的圖像（可以使用水平滾動條進行導航），但我無法將圖像顯示在瀏覽器的100％寬度之外。

由於圖像的數量會有所不同，所以我需要避免爲容器設置恆定的寬度。

這是我正在嘗試的代碼。

HTML：

<div id="container-galeria"> 
     <img src="galeria1/1.jpg"> 
     <img src="galeria1/1.jpg"> 
     <img src="galeria1/1.jpg"> 
     <img src="galeria1/1.jpg"> 
     <img src="galeria1/1.jpg"> 
    </div> 

CSS：

#container-galeria{width:auto;min-width:100%;height:auto;min-height:100%;} 
#container-galeria img{float:left} 

希望我是清楚的，有人能幫助我。提前致謝！

Answer 1

試試這個：

<div id="container-galeria"> 
     <ul><li> <img src="galeria1/1.jpg"></li> 
     <li> <img src="galeria1/1.jpg"></li> 
     <li><img src="galeria1/1.jpg"></li> 
     <li><img src="galeria1/1.jpg"></li> 
     <li><img src="galeria1/1.jpg"></li> 
    </div> 

ul { 

    list-style:none; 
    white-space: nowrap; 
} 
li { 
    float: left: 
/*overflow-x:scroll; /*optional*/ */ 
width:120px; 
    display: inline; 
} 

http://pastebin.com/8x6P8nA1