添加多个图像时，为什么我的 div 没有水平滚动？答案

【问题标题】：Why isn't my div scrolling horizontally when adding multiple images?添加多个图像时，为什么我的 div 没有水平滚动？
【发布时间】：2010-03-10 04:08:34
【问题描述】：

我有一个外部 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 声明，以便有人可以实际测试此标记而无需重写它。顺便说一句——我确实尝试过对此进行测试，它实际上在 FF 中似乎可以正常工作，所以你的真实页面上可能还有其他问题或样式冲突。

#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;}

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

#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 { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; margin:0; text-align:center; } ul, li{ white-space:nowrap; }

【解决方案4】：

您已经走在正确的道路上：您设置“float:left;”的方法在<li>s 上，结合在<ul>s 上设置“width: 305px”应该基本上可以避免浮动下降。

不过，有几点需要检查：

305px 真的足够吗？（它必须至少与第 1 行中元素的组合宽度一样大，包括边距、填充和边框）尝试将其设置为更大的值。 overflow: auto 无济于事，因为浮动总是会换行而不是导致溢出。设置足够大的宽度非常适合我（至少在我自己的示例中）。

其他尝试：

尝试不浮动“.image-row”。
尝试在图像上设置宽度。
您的 HTML 中有两次 id “row1” - 这是无效的。

【讨论】：

在 ul 上设置较大的宽度确实有效，但会导致其他问题 - 然后出现滚动条，但它会滚动到该长度，而不是图像宽度。我事先不知道图像宽度 - 这些是动态添加的，因此可能会导致滚动过多（这并不可怕），但最大的问题是如果图像不是很宽，滚动条仍然会显示哪个不好。此外，双 row1 元素是一个错字 - 应该是 row1 和 row2（我已经编辑了问题）
在这种情况下，您有两个选择： a) 在服务器上计算宽度，并使用它来动态生成
我的版本可以，你不需要指定宽度。我在 Firefox、IE、Chrome 和 Safari 中测试了代码。我删除了一些元素和类，因为它们是不必要的，但您可以根据需要重新添加它们，它仍然可以工作。
@shipshape: +1，但我们真的需要“位置：相对；”完全没有（也许对于 IE 左右）？
不，你可以把它们拿出来。 padding: 0 和 margin: 0 也不是必需的，当然你可以删除边框（我只是包括了那些，所以你可以很容易地看到 div）。