图片列表不换行的几种方式
在制作图片列表时，因为统一给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}
