nav滚动效果（子元素不换行布局方式）

nav滚动效果（子元素不换行布局方式）

1. flex

<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

div{
	width: 100vw;
	height: 200px;
	overflow-X: scroll;
}
ul{
	width: max-content;
	display: flex;
	aline-item: center;
}
li{
	width: 100px;
	height:200px;
	padding:30px;
}

2. float(父级无固定高度，会导致父级高度塌陷)

<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

div{
	width: 100vw;
	height: 200px;
	overflow-X: scroll;
}
ul{
	width: max-content;
}
li{
	width: 100px;
	height:200px;
	padding:30px;
	float: left;
}

3. inline-block

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul{
	width: 100vw;
	height: 200px;
	overflow-X: scroll;
	white-wrap: nowrap;
}
li{
	width: 100px;
	height: 200px;
	padding: 30px;
	display: inline-block;
}