哎！最近笨人又遇到了关于使用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>注意！注意！注意！ 一定要放在移动端及移动模拟器上运行才起作用哦！！！ 重要的事情说三遍！
1244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
