Question

我正在尝试制作一个照片库，我的想法是你有一个包含所有图像的水平（！）滑块（稍后在脚本中你可以点击它们，但这并不重要）。问题是所有的图像都不适合布局，所以这就是我需要某种滚动机制的原因。这是我的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; }

这或多或少都像微风一样，除了滑块充满空白（显然是由于宽度为20000px;）。但是，20000px的宽度是nessecary，否则包装div将采用与div＃thumbnails相同的宽度，并且该宽度当然是960px（由于section-tag）。结果是列表将获得额外的行，而我只想要一行。理想情况下，包装div应该与动态列表具有完全相同的宽度，但我被困在这里。有人知道如何解决这个问题（最好没有jQuery / JS，用javascript解决它并不是很困难）？

Answer 1

这是你正在寻找的吗？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

水平div滚动条没有固定宽度

1 个答案: