图片列表不换行的几种方式

在制作图片列表时，因为统一给li设置margin-right的值，而导致最右边的图片折行。应对这个问题，总结了几个解决方案。

 

以“页面宽度1000px，一行四图”为例。

 

1. 设置ul宽度

思路：

ul父级div设置width与overflow;

ul设置width的值大于四个图的宽度加上外边距

 

代码如下：

 1 <div class="wrap1">
 2     <ul>
 3         <li></li>
 4         <li></li>
 5         <li></li>
 6         <li></li>
 7         <li></li>
 8         <li></li>
 9         <li></li>
10         <li></li>
11     </ul>
12 </div>

1 .wrap1{width:1000px;margin:0 auto;background:#eee;overflow:hidden}
2 .wrap1 ul{width:1020px}
3 .wrap1 li{float:left;width:235px;height:132px;overflow:hidden;background:#78b545;margin:0 20px 20px 0;}
4 .wrap1 li img{width:100%;display:block;overflow:hidden}

 

2. 设置ul右边距为负

思路：

ul设置margin-right为负值，IE6/7需要设置zoom:1;

 

代码如下：

 1 <div class="wrap2">
 2     <ul>
 3         <li></li>
 4         <li></li>
 5         <li></li>
 6         <li></li>
 7         <li></li>
 8         <li></li>
 9         <li></li>
10         <li></li>
11     </ul>
12 </div>

1 .wrap2{width:1000px;margin:0 auto;background:#eee}
2 .wrap2 ul{margin-right:-20px;*zoom:1}
3 .wrap2 li{float:left;width:235px;height:132px;overflow:hidden;background:#78b545;margin:0 20px 20px 0}
4 .wrap2 li img{width:100%;display:block;overflow:hidden}

 

转载于:https://www.cnblogs.com/crossjae/p/5552960.html