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

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

 

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

 

1. 设置ul宽度

思路：

ul父级div设置width与overflow;

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

 

代码如下：

<div class="wrap1">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

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

2. 设置ul右边距为负

思路：

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

 

代码如下：

<div class="wrap2">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

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