css:ul里面的li如何设置滚动条，

最近的需求需要给一排图片加横向滚动，大家都知道用ul li之后里面的li都是设置了float：left，这样会导致就算你设了width，横向滚动也是无效的，所以我的办法就是不给他设float，但是可以排列整齐 嘻嘻

先上效果图：

这是比较简单的效果 没做美化。。

然后贴代码：

<div class="div-rymodal col-md-9">
        <ul class="ul-rymodal">
          <li class="li-rymodal"><a href=""><img src="img/aaa.jpg" alt="" class="img-rymodal"></a><span class="span2-rymodal">张一</span></li>
          <li class="li-rymodal"><a href=""><img src="img/aaa.jpg" alt="" class="img-rymodal"></a><span class="span2-rymodal">张二</span></li>
          <li class="li-rymodal"><a href=""><img src="img/aaa.jpg" alt="" class="img-rymodal"></a><span class="span2-rymodal">张三</span></li>
          <li class="li-rymodal"><a href=""><img src="img/aaa.jpg" alt="" class="img-rymodal"></a><span class="span2-rymodal">张四</span></li>
          <li class="li-rymodal"><a href=""><img src="img/aaa.jpg" alt="" class="img-rymodal"></a><span class="span2-rymodal">张五</span></li>
          <li class="li-rymodal"><a href=""><img src="img/aaa.jpg" alt="" class="img-rymodal"></a><span class="span2-rymodal">张五</span></li>
        </ul>
      </div>

 

css部分：

.li-rymodal{
  /*float: left;
  list-style: none;
  margin: 5px;*/
  list-style: none;
  margin: 5px;
  white-space: nowrap;
  width: 70px;
  display: inline-block;
}
.ul-rymodal{
  display: block;padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
}

这是把scroll加在了ul上，然后设置nowrap不换行，就可以实现需要的效果啦！