如何强制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 
}