Home >Web Front-end >CSS Tutorial >css to achieve horizontal arrangement and scrolling effect of images
This article mainly introduces CSS to achieve the horizontal arrangement and scrolling effect of images. Friends who need it can refer to it. I hope it can help everyone.
The specific code is as follows:
.imageList{ overflow-x: auto; overflow-y: hidden; height:180px; white-space: nowrap; img{ width:auto; height:100%; margin-right:10px; } }
<p class="imageList"> <img src="1.jpg"/> <img src="2.jpg"/> <img src="3.jpg"/> <img src="4.jpg"/> <img src="1.jpg"/> </p>
Note here that the img tag cannot float left, and the outer container must be added without line breaks
white-space: nowrap;
Related recommendations:
javascript implementation of asynchronous image upload method example
How to use CSS to create image rotation effects
The above is the detailed content of css to achieve horizontal arrangement and scrolling effect of images. For more information, please follow other related articles on the PHP Chinese website!