css 横行滑动 list 菜单

要达到横向的 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;
}