添加多个图像时,为什么我的div不能水平滚动？

Question

我有一个外部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),即使它应该在第一行并且griddiv应该水平滚动.它会垂直滚动.我可以强制div扩展吗？如果我从网格div中删除宽度,我会得到水平滚动条,但图像仍然在第二行.

Answer 1

这会吗？我有点简化了.

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>