CSS实现移动端横向滚动导航条

cssHTML代码

<ul>

<li>

<a href="">1</a>

</li>

<li>

<a href="">2</a>

</li>

<li>

<a href="">3</a>

</li>

<li>

<a href="">4</a>

</li>

<li>

<a href="">5</a>

</li>

<li>

<a href="">6</a>

</li>

<li>

<a href="">7</a>

</li>

<li>

<a href="">8</a>

</li>

</ul>

CSS代码

ul{

display: flex;

/*允许横向滚动*/

overflow-x: scroll;

/*禁止纵向滚动*/

overflow-y: hidden;

/*文本平铺*/

text-align: justify;

}

ul::-webkit-scrollbar {

/*有滚动效果但隐藏滚动条*/

display: none;

}