ul 下的li 横向不换行,可以拖动

<div  style=" background:#ffFFFF;padding:0px;width: 100%;height: 400px;margin: 0px;overflow:hidden;">
   <ul style="background:#ffffff;padding:0px;white-space: nowrap;vertical-align:top;width: 100%;height: 330px;margin: 0px;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling : touch;">
        <li style="display: inline-block; vertical-align:top;width: 100px; margin: 0px;padding: 0px;">             
        </li> <!--添加多个li-->
    </ul>
</div>

最外层div的作用是遮挡滚动条,去掉div查看效果

ul

-webkit-overflow-scrolling : touch;这个属性可以去掉
vertical-align:top;顶端对齐
overflow-x:scroll;overflow-y:hidden;滚动条
white-space: nowrap;内容不换行

li

display: inline-block;行内块

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值