nav滚动效果(子元素不换行布局方式)
- 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;
}
- 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;
}
- 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;
}