[TOC]
**解决方案**
### 1. 子元素设置 `display: inline-blok`
想要实现横向滑动效果,请先确保所有子元素的 `display` 属性为 `inline-block` ,然后父元素设置固定高度,以及其它属性
~~~
.nav {
height: 222px;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
~~~
### 2. 设置双元素
子元素比父元素宽就会触发滚动,显示效果上,第一种方案更为日常所需
~~~
.nav {
width: 800px;
overflow-x: auto;
border: 1px solid #333;
}
.container {
width: 1000px;
height: 200px;
}
~~~