`

CSS实现平铺滚动效果

 
阅读更多

效果:



主要就是在父容器上设置水平方向滚动,并禁止换行。然后子元素用inline-block实现平铺。关键CSS如下:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul {
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
}

li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics