频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
移动端横向可滑动bavbar的代码实现
2018-07-11 16:11:59         来源:m0_37130263的博客  
收藏   我要投稿

移动端横向可滑动bavbar的代码实现

思路图

1.例子

父元素{
    width: 100%;
    height: 3.5rem;

    overflow-x: scroll;
    white-space: nowrap; //可以强制目前布局而不让子元素自动换行
}
子元素{
    width: 4rem;
    height:3rem;

    dispaly: inline-block;
}

2.隐藏‘滑动bar’

给父元素套个壳子,隐藏的原理就是实际显示比父元素小的高度 就看不见‘滑动bar’了(壳子3rem,父元素3.5rem)

壳子{
    overflow: hidden;
    height: 3rem;
 }
点击复制链接 与好友分享!回本站首页
上一篇:vue的keep-alive:Vue实现组件信息的缓存
下一篇:css和js关于引用图片路径的问题解析
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站