overflow-x:auto無(wú)效的可能原因：
（1）子元素用了浮動(dòng)
（2）父元素自動(dòng)換行了
解決方法：
父元素樣式：
overflow-x: auto; // 水平方向內(nèi)容溢出顯示滾動(dòng)條
width: 300px; // 根據(jù)實(shí)際情況設(shè)置寬
height: 30px; // 根據(jù)實(shí)際情況設(shè)置高
white-space: nowrap; // 不換行
子元素樣式：
display: inline-block;
或者
display: inline;
記得子元素不要用float:left;即使給父元素添加類clearfix 清除浮動(dòng)了仍然無(wú)效。
移動(dòng)端簡(jiǎn)單示例效果：
左右滾動(dòng).gif
示例代碼：
Html:
<ul>
<li>第一個(gè)哈哈</li>
<li>第一個(gè)哈哈</li>
<li>第一個(gè)哈哈</li>
<li>第一個(gè)哈哈</li>
</ul>
Css:
ul{overflow-x: auto;width: 300px;height: 30px;white-space: nowrap;}
ul::-webkit-scrollbar{width: 0px;height: 0px;} // 隱藏滾動(dòng)條
li{list-style: none;padding: 2px 4px;background: rgba(1,1,1,.05);border-radius: 4px;margin: 0 6px 8px 0;display: inline-block;font-size: 12px;}
