html - 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