纯CSS 模仿 scroll-x的方法

这里是模仿 横向滑动条的样式  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%;

}