css实现图片横向排列滚动效果
发布时间：2017-12-07 15:58:11 作者：佚名 
我要评论
我要评论这篇文章主要介绍了css实现图片横向排列滚动效果,需要的朋友可以参考下
具体代码如下所示：
.imageList{
overflow-x: auto;
overflow-y: hidden;
height:180px;
white-space: nowrap;
img{
width:auto;
height:100%;
margin-right:10px;
}
}
<div class="imageList">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="1.jpg"/>
</div>
这里注意，img标签不能左浮动，外层容器必须加不换行
white-space: nowrap;
总结
以上所述是小编给大家介绍的css实现图片横向排列滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
- div设置成float之后，就无法使子div居中显示了，那么如何让几个横向排列的浮动的div居中显示呢，下面有个不错的方法，希望对大家有所帮助2014-02-20
让横向排列的几个浮动(float:left)的子div居中显示
div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示，下面有个不错的解决方法，大家可以参考下2014-02-17- 怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需2013-10-23
这篇文章主要介绍了HTMl中标签中li横向排列的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-21
最新评论