[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;
}
~~~