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），即使它应该在第一行，grid div应该水平滚动。它会垂直滚动。我可以强制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>

Answer 2

你需要放一个白色空间：nowrap;关于UL和LI标签。您还需要LI元素显示内联而不是浮动它们。

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

ul, li{
    white-space:nowrap;
}

HTML：

<div id="grid-container">
<div id="grid"> 
<div class="image-row"> 
  <ul> 
    <li> 
      <img id="img1" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img2" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img3" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img4" class="grid-image" src="test.jpg" /> 
    </li>
  </ul>
</div>
<div class="image-row"> 
  <ul> 
    <li> 
      <img id="img5" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img6" class="grid-image" src="test.jpg" /> 
    </li>
  </ul>
</div>

适用于IE，FF，Safari和Chrome的最新版本。

Answer 3

试试这个：

#grid-container li { 
  display: inline;
  list-style-type:none; 
  padding:5px 15px 5px 15px; 
  height:88px; 
  text-align:center;
  white-space: nowrap;
}

Answer 4

你已经走在了正确的道路上：你设置“浮动：左边”的方法在<li>上，结合在<ul> s上设置“width：305px”应该基本上可以避免浮动。

但是，有几件事需要检查：

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

其他尝试：

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

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

4 个答案: