纯CSS 模仿 scroll-x的方法
2017-08-29 本文已影响0人
点_ba7a
这里是模仿 横向滑动条的样式 ul > li > img 的一个结构
为什么能出现这样一个效果 我想主要是因为 UL设置一 flex li成了一个弹性盒子 li的内容就撑起li的宽度 大概是这样吧
1.ul 的结构 核心代码是 flex overlow-x
overflow-x:auto;
display:flex;
width:auto;
2. li 结构 这里其实可有可无
width:64px;
3. li 的内容结构 其实真正撑起li的宽度的是 li 里面的内容撑起来的
width:64px;
height:82px;
4. 隐藏滚动条
.actorUl::-webkit-scrollbar{
display:none;
}
实例代码
.actorUl{
overflow-x:auto;
display:flex;
width:auto;
}.actorUl::-webkit-scrollbar{
display:none;
}
.actor{
float:left;
width:64px;
margin-right:10rpx;
}
.actor .actorImg{
width:64px;
height:82px;
}
.actor .actorImg image{
width:100%;
height:100%;
}
