使用css实现移动端导航条滚动
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在浏览器模拟的时候会有底部滚动条，当在真机上时，滚动条会消失
