最近的需求需要给一排图片加横向滚动,大家都知道用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不换行,就可以实现需要的效果啦!