html - 制作图片库只填充 l 和 right 而不是 up 和 down

Question

我有关注我试图用 CSS 变成滑块的图片库。

如您所见，它在其外部容器内上下填充图像。我想强制它达到一定的高度，然后滚动。display:flexbox; overflow-x:scroll; height:100px; width:500px我想通过制作可以解决该问题的容器。但是，如果我这样做，这就是它的样子：

问题是，无论我做什么，它都不会滚动或溢出。它将调整图片的高度和宽度以适合容器内。缺少什么？

容器及其内容的代码：

    <ol class="flex-control-nav flex-control-thumbs">
<li><img src="filepath.jpg" class="flex-active" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
    </ol>

标签： htmlcsswordpressimageflexbox

Answer 1

这是一个工作片段：

body {
  overflow: none;
}

.container {
  display: flex;
  width: 500px;
  height: 120px;
  overflow: auto;
}

.container li {
  list-style-type: none;
}

.container li img {
  width: 100px;
  margin-left: 40px;
}

<div class="container">
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
</div>