div 上的水平滚动条，动态内容和 overflow-y 隐藏

Question

我需要一个只有一行图片的div，div里面的图片数量可以随时更改。所以我想要水平滚动条。我有如下结构。我试图用 css 实现它，但不幸的是它不起作用。

<div id="scroll-wrapper">
  <div id="thumbnails">
    <div class="thumbnail-container active">
      <img src="foobar" />
    </div>
    <div class="thumbnail-container">
      <img src="bar" />
    </div>
  </div>
</div>

代码 CSS： http://jsfiddle.net/c622c3w9/2/

请注意，我不想要 javascript 的解决方案。

Answer 1

我必须删除 float: left 才能使滚动条正常工作

 #thumbnails {
  padding-bottom: 10px;
  max-height: 50px;
  min-width: 100px;
  overflow-y: hidden;
  overflow-x: scroll; /*add this so you get bottom scrollbar*/
  white-space: nowrap; /*add this to stop images wrapping so thay stay on one line*/
}

.thumbnail-container {
  display: inline-block;
  position: relative;
  line-height: 5px;
  border: 2px solid steelblue;
  margin: 3px;
  display: inline-block;
  /*float: left; remove this otherwise scroll will not work*/
  margin-bottom: 15px !important;
}

http://jsfiddle.net/c622c3w9/3/

Answer 2

你只需要做两件事。 Fiddle.

.thumbnail-container {
  .......
  // float: left;     <== Remove
}

#thumbnails {
  .....
  white-space: nowrap;   // Add
}

div 上的水平滚动条，动态内容和 overflow-y 隐藏

horizontal scrollbar on div with dynamic content and overflow-y hidden

html

css

dynamic

overflow

scrollbar