如何在一个ul里，所有的li横向滚动，不换行，到最后一个图像回弹
小闹
- 发布：2015-11-13 23:37
- 更新：2017-11-28 19:28
- 阅读：12387
如何在一个ul里，所有的li横向滚动
分类：MUI
这个很好解决。
.wrap { width:100%; height:160px; overflow-x:scroll; overflow-y: hidden;}
.wrap::-webkit-scrollbar { opacity: 0;}
.wrap > ul { width:20000px; }
.wrap > ul > li { float:left; margin-right:20px; width:100px; height:140px; }
在移动端通用，低版本手机没测试过
原内容来自 https://segmentfault.com/q/1010000003490547
在原基础上做了少量修改，避免当内容宽度小于容器宽度时，会出现横向滚动条。解决方法是：将横向滚动条溢出至容器外，保证横向滚动条不可见
<div class="inc-scroll-landscape-container">
<div class="inc-scroll-landscape-content">
<ul>
<li class="active">a</li>
<li>b</li>
<li>c</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
</ul>
</div>
</div>
.inc-scroll-landscape-container { width: 100%; height: 50px; overflow: hidden; background-color: #FFF;}
.inc-scroll-landscape-container > .inc-scroll-landscape-content {
padding-bottom: 100px; /* 当内容宽度小于容器宽度时，会出现横向滚动条。将横向滚动条溢出至容器外，保证横向滚动条不可见 */
white-space: nowrap;
overflow: hidden;
overflow-x: scroll; /* 1 */
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-overflow-scrolling: touch; /* 2 */
text-align: justify; /* 3 */
&::-webkit-scrollbar { display: none;}
}
.inc-scroll-landscape-container > .inc-scroll-landscape-content > ul {}
.inc-scroll-landscape-container > .inc-scroll-landscape-content > ul > li { width: 60px; height: 50px; line-height: 50px;
position: relative; display: inline-block; text-align: center; font-size: 13px; color: #666; font-weight: bold;}
.inc-scroll-landscape-container > .inc-scroll-landscape-content > ul > li.active:after { position: absolute;
right: 16px; bottom: 8px; left: 16px; height: 5px;
background-color: #DD524D; content: ' '; transform: scaleY(0.5); -webkit-transform: scaleY(0.5);}