html - 没有固定宽度的水平 div 滚动

Question

我正在尝试制作一个相册，想法是您有一个包含所有图像的水平(!) slider (稍后在脚本中您可以单击它们，但这并不重要)。问题是所有图像都不适合布局，所以这就是为什么我需要某种滚动机制。这是我的 HTML:

<section>
 <div id="thumbnails">
  <div>
   <ul>
    <li><img></li>
    <li><img></li>
    .............
    <li><img></li>
    <li><img></li>
   </ul>
  </div>
 </div>
</section>

这是我的 CSS:

div#thumbnails { margin: 0; padding: 0; overflow: auto; }
div#thumbnails * { margin: 0; padding: 0; }
div#thumbnails div { width: 20000px; }
div#thumbnails ul { list-style: none; }
div#thumbnails ul li { display: inline-block; }
section { width: 960px; }

这或多或少像微风一样工作，除了 slider 被空白填充的事实(显然是由于 20000 像素的宽度；)。然而，20000px 的宽度是必需的，否则包装 div 将采用与 div#thumbnails 相同的宽度，并且该宽度当然是 960px(由于 section-tag)。结果是该列表将获得额外的行，而我显然只想要 1 行。所以理想情况下，包装 div 应该与动态列表具有完全相同的宽度，但我被困在这里。有人知道如何解决这个问题(最好不用 jQuery/JS，用 javascript 解决它不是很难)？

Answer 1

这是您要找的吗？

div#thumbnails {
  margin: 0;
  padding: 0;
  overflow: auto;
}
div#thumbnails * {
  margin: 0;
  padding: 0;
}
div#thumbnails div {
  white-space: nowrap;
}
div#thumbnails ul {
  list-style: none;
}
div#thumbnails ul li {
  display: inline-block;
}
section {
  width: 960px;
}

<section>
  <div id="thumbnails">
    <div>
      <ul>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
        <li>
          <img src="http://placehold.it/150x150">
        </li>
      </ul>
    </div>
  </div>
</section>