因此,我一直在尝试为一堆缩略图制作水平滚动菜单。我找到了有关如何使其水平滚动的详细信息,但是我的缩略图仍然堆叠在彼此的顶部,并且仍在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;
}
我非常接近,已经做过研究,而且几乎没有做我想要做的事情。关于我需要解决的任何想法,或者我可能有的错误?非常感谢您的帮助。
最佳答案
您的li元素仍然具有display属性,该属性使元素垂直堆叠。
您可以将其更改为显示:inline-block;
至于你提到的另一个问题。将容器高度设置为“自动”将使容器的高度与缩略图成比例。在将display属性设置为inline-block后,这将起作用。
.thumbnail-list li {
display: inline-block;
}
jsfiddle示例
https://jsfiddle.net/e99wfqku/1/
关于html - 横向滚动CSS缩略图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45065881/