flex 布局并为其设置横向导航栏
效果演示:
代码为:
<ul style="display:flex; white-space:nowrap; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;">
<li>...</li>
<li>...</li>
</ul>
各个css的功能
ul{
display:flex; # 设置flex
white-space:nowrap; # 设置子元素的文字不换行
flex-wrap:nowrap; # 设置子元素不换行
overflow-x:auto; # 设置横向滚动条
overflow-y:hidden; # 设置禁止垂直滚动
}
如果不用flex,则不需要flex-wrap:nowrap;即可