通过隐藏横向滚动条但保留滚动功能实现tab页签左右滑动

通过隐藏横向滚动条但保留滚动功能实现tab页签左右滑动效果

前两天开发页面时碰到一个问题，需要实现如下效果：

1. 解决ul换行问题
   tab页签效果实现了，但是当页签数量过多，超出宽度时，tab会自动换行，但是要求实现的功能是点击左右两侧按钮时tab页签可以来回滑动，因为这是用li实现的，ul默认超出宽度会换行，因此需要先解决ul的换行问题，我在网上找到了两种解决方案：
   方案一：
   设置足够宽的宽度，然后将li的float属性设置为left。意思就是使li元素向左浮动排列。代码如下：

ul {
    width: 2000px; //设置足够的宽度
    overflow: hidden;
    white-space:nowrap; //处理块元素中的空白符和换行符的，这个属性保证li不换行
}
li{
    list-style: none;
    float: left; //向左排列
    margin-left: 15px;
    width: 130px;
}

方案二：

ul {
    display: block;
    overflow: hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证li不换行
}
li