首页 > 移动平台 > 详细

使用css实现移动端导航条滚动

时间:2018-01-30 10:45:56      阅读:265      评论:0      收藏:0      [点我收藏+]
 1 <div class="tab">
 2   <div class="table-item">
 3     <span class="tab-link">首页</span>
 4   </div>
 5   <div class="table-item">
 6     <span class="tab-link">时政</span>
 7   </div>
 8   <div class="table-item">
 9     <span class="tab-link">思想理论</span>
10   </div>
11   <div class="table-item">
12     <span class="tab-link">党建经验</span>
13   </div>
14   <div class="table-item">
15     <span class="tab-link">最新动态</span>
16   </div>
17   <div class="table-item">
18     <span class="tab-link">中铁鲁班商务网</span>
19   </div>
20 </div>
 1 .tab {
 2     white-space: nowrap; // 这个必须有
 3     height: 1.466666666666667rem;
 4     line-height: 1.466666666666667rem;
 5     font-size: 0.426666666666667rem;
 6     overflow-y: hidden; // 这个必须有
 7 }
 8 .tab .table-item {
 9     padding-left: 0.133333333333333rem;
10     padding-right: 0.133333333333333rem;
11     display: inline-block; // 这个必须有
12 }

这个demo在浏览器模拟的时候会有底部滚动条,当在真机上时,滚动条会消失

使用css实现移动端导航条滚动

原文:https://www.cnblogs.com/zhaobao1830/p/8383619.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!