哎！最近笨人又遇到了關於使用css3實現ul 橫向滾動的問題了，知道很簡單，突然間想不起來！灰常苦惱，就寫下這篇文章來加深記憶！（當然我也在度娘上搜了一波，發現沒有滿意的答案，就把這篇文章分享給 同我一樣奮鬥在前端崗位上的各位同仁吧！）
來來來！上乾貨！
結構部分
- 先寫一個包裹層 div
- 在寫一個包裹li的ul
- 最後寫很多li
css部分
- 用到 文本不換行 white-space: nowrap;
- 用到了元素超出寬度滾動 overflow: auto;
- 當然還有 li 標籤的 display:inline-block;
上代碼
<style>
*{margin: 0;padding: 0;list-style: none;}
html,body{height: 100%;width: 100%;}
.box{width:600px;height:100px;}
.ul{min-width:600px;height: 100px;white-space: nowrap;overflow: auto;}
.ul li{width:100px;height:100px;display:inline-block;margin-right:10px;background:red;}
</style>
<body>
<div class="box">
<ul class="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
注意！注意！注意！ 一定要放在移動端及移動模擬器上運行才起作用哦！！！ 重要的事情說三遍！