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

Question

我有一个 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>

Answer 1

您的代码对我来说似乎符合预期。 https://fiddle.jshell.net/ph110293/goetup62/

Answer 2

它仅在 Firefox 上不起作用。对于 Firefox，我必须将 'fieldset' 标签样式设置为 'display:table-column;'。由于我的主要 div 位于另一个 div 中的标签内，class 为 'container' (Bootstrap)，字段集保持容器宽度。

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

Horizontal scrollbar not working when browser width is re-sized?

css

overflow

scrollbar

horizontal-scrolling

responsive-design