重新调整浏览器宽度时水平滚动条不起作用？答案

【问题标题】：Horizontal scrollbar not working when browser width is re-sized?重新调整浏览器宽度时水平滚动条不起作用？
【发布时间】：2016-08-16 05:56:26
【问题描述】：

我有一个 div，其中我有包含图像的 div。我想要显示所有图像，但是当浏览器宽度重新调整大小（更小）以显示自动水平滚动条而不是图像在下面堆积。我正在尝试创建它，但它不起作用。有什么帮助吗？？

<div style="height:80px;width:auto;border:1px solid red;white-space:nowrap;overflow-y:hidden;-ms-overflow-y:hidden;overflow-x:scroll;-ms-overflow-x:scroll;">
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
</div>

【问题讨论】：

标签： css responsive-design scrollbar overflow horizontal-scrolling

【解决方案1】：

您的代码似乎按预期对我有用。 https://fiddle.jshell.net/ph110293/goetup62/

【讨论】：

它仍然不适合我。我正在使用引导类进行响应。可能是风格冲突。您的示例有效，但我的示例无效。
很抱歉让我重新输入代码有点不同。
这段代码在 html 元素中没有任何引导类。它不应该引起任何冲突。
我更新了小提琴的链接。它正在使用您的新代码。
代码没有更新。我有 1 个大 div，在那个 [div > a > img]

【解决方案2】：

它仅在 Firefox 上不起作用。对于 Firefox，我必须将“fieldset”标签样式设置为“display:table-column;”。由于我的主 div 位于另一个 div 中的标签内，该标签位于另一个具有“容器”类（Bootstrap）的标签中，因此字段集一直采用容器宽度。

【讨论】：