码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-01-30 12:52:53      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:body   tab   首页   移动   商务   消失   flow   isp   col   

 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实现移动端导航条滚动

标签:body   tab   首页   移动   商务   消失   flow   isp   col   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!