我有一个外部 div,在其内部有一个内部 div,其中包含图像列表。当图像比外部 div 宽时,我想让它水平滚动,但它只是将图像放在下一行而不是扩展。如果我添加很多行,div 会垂直滚动,但水平滚动则不会。我尝试过的每个浏览器都会出现这种情况 - Firefox、Chrome、IE 和 Safari。
这是CSS:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }
.image-row { float:left; margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
这是 HTML:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="images/img1.jpg">
</li>
<li>
<img id="img2" class="grid-image" src="images/img2.jpg">
</li>
<li>
<img id="img3" class="grid-image" src="images/img3.jpg">
</li>
<li>
<img id="img4" class="grid-image" src="images/img4.jpg">
</li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="images/img5.jpg">
</li>
<li>
<img id="img6" class="grid-image" src="images/img6.jpg">
</li>
</ul>
</div>
</div>
</div>
问题是 img4 显示在第二行(img5 和 img5 显示在第三行),即使它应该显示在第一行和grid
div 应该水平滚动。它确实垂直滚动。我可以强制div扩展吗?如果我删除网格 div 的宽度,我确实会得到水平滚动条,但图像仍在第二行。
这行吗?我稍微简化了它。
CSS(您可以删除边框,它们只是为了让您可以看到发生了什么):
#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}
HTML:
<div id="grid-container">
<div id="grid">
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)