flex 布局并为其设置横向导航栏

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;即可