要达到横向的 tab 使其左右滑动,常见的应该是 flex 布局了,我们先展示 dom 结构,如下
<ul class='tabs'> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> <li class='tab-list'>web前端</li> </ul>
然后使用 flex 样式
.tabs{ width: 100%; overflow-x: scroll; display: -webkit-box; display: flex; -webkit-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-justify-content:space-between; ustify-content:space-between; } .tab-list{ padding: 0 10px; text-align: center; -webkit-flex:1 0 auto; flex:1 0 auto; }
但是,flex在 ios 上的兼容问题,很是麻烦,不得已,考虑一下方案,还是刚刚的 dom ,样式不同
.tabs{ width: 100%; display: inline; white-space: nowrap; float: left; overflow-x: scroll; overflow-y: hidden; } .tab-item{ display:inline-block; padding: 0 10px; text-align: center; }