html - 如何强制 li 元素水平滚动，并且应该能够使用 css 在一行中容纳所有 li 元素

Question

我正在尝试将 li 元素的默认滚动从垂直更改为水平。我能够做到这一点，但它作为一行中的元素列表出现，然后是它下面的另一个元素列表。但我希望所有列表都在一行中，而不管 li 元素的数量如何。

HTML 中的代码：

<div class="imageGallery">
       <ul>
           <li><img src="img01.png"/></li>
           <li><img src="img02.png"/></li>
           <li><img src="img03.png"/></li>
           <li><img src="img04.png"/></li>
           .....
           .....
       </ul>
</div>

CSS：

.imageGallery {
    overflow-x: scroll;
        overflow-y: hidden;

}   
        ul {
        width: 1500px;
        margin: 0;
        padding: 0;
    }

输出以水平滚动条的形式出现，其中包含一行中的图像列表，然后是其下方的元素列表，依此类推。我怎样才能使它全部进入单行？

感谢大家的帮助。

Answer 1

如果我理解得很好，您希望所有 li 元素都保持在一行中。把它放在你的 CSS 中

.imageGallery ul{
    white-space: nowrap
} 
.imageGallery li{ 
    display:inline-block 
}