可滚动的tab导航

[tomieric]

可滚动的tab导航

• 容器设置 overflow-x:auto
• 隐藏滚动条 element::-webkit-scrollbar { display: none }

css

.tab{
        width: 100%;
        overflow-x: auto;
    }
    .tab::-webkit-scrollbar {
        display: none;
    }

    .tab ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: -webkit-box;
    }
    .tab ul li {
        display: -webkit-flex;
        display: flex;
        flex: 1;
        padding: 5px 20px;
    }

html

<div class="tab">
        <ul>
            <li>
                <a href="#" title="">首页</a>
            </li>
            <li>
                <a href="#" title="">首页</a>
            </li>
            <li>
                <a href="#" title="">首页</a>
            </li>
            <li>
                <a href="#" title="">首页</a>
            </li>
            <li>
                <a href="#" title="">首页</a>
            </li>
            <li>
                <a href="#" title="">首页</a>
            </li>
            <li>
                <a href="#" title="">首页</a>
            </li>
        </ul>
    </div>