水平滚动 CSS 缩略图

Question

所以我一直在尝试为一堆缩略图制作一个水平滚动菜单。我找到了有关如何使其水平滚动的重要信息，但是我的缩略图仍然堆叠在彼此之上，并且仍然在我的 div 中垂直滚动。我希望我的所有缩略图在“x”方向溢出时水平滚动。我还希望我的div 保持在与缩略图宽度成比例的高度。现在，如果我执行auto，容器div 将更改为足够大的高度，以在多行中显示所有 50 个图像，而不是仅显示一行。这是我的代码

HTML（.ejs 文件）：

<div class="thumbnail-container">
   <ul class="thumbnail-list">

   <% for (var i = 0; i < listData['photos'].length; i++) { %>
      <li>
         <span><img class="thumbnail-image" src="http://www.realcove.net/<%=listData['photos'][i]%>"></span>
      </li>
   <% } %>
   </ul>
</div>

CSS：

.thumbnail-container {
    overflow-x:scroll;
    height: 75px;
    width:100%;
    padding: 0 15px;
}

.thumbnail-list {
    white-space:nowrap;
}

.thumbnail-image {
    display: block;
    padding:2px;
    max-width: 100px;
    height:auto;
}

我非常接近，我已经完成了研究，但它几乎没有按照我的意愿去做。关于我需要修复什么的任何想法，或者我可能遇到的错误？非常感谢您的帮助，谢谢。

Answer 1

你的 li 元素仍然有一个 display 属性，可以让元素垂直堆叠。

你可以改成显示：inline-block;

至于你提到的另一个问题。将容器高度设置为自动将使容器的高度与缩略图成比例。这将在您将 display 属性设置为 inline-block 后起作用；

.thumbnail-list li {
   display: inline-block;
}

jsfiddle 示例 https://jsfiddle.net/e99wfqku/1/