<style>

*{margin: 0;padding: 0;}

#demo li{

border-bottom: 1px solid #ccc;

}

#demo ul{

margin-bottom: -1px;

}

#demo{

overflow: hidden;

}

</style>

<div id="demo">

<ul>

<li>写个内容其实好困难啊。。。</li>

<li>写个内容其实好困难啊。。。</li>

<li>写个内容其实好困难啊。。。</li>

<li>写个内容其实好困难啊。。。</li>

<li>写个内容其实好困难啊。。。</li>

</ul>

</div>

<style>

#demo2{

background: #aaa;

width:620px;

}

#demo2 ul{

margin-right: -100px;

overflow: hidden;

}

#demo2 li{

float: left;

margin-right: 10px;

}

.img{

width: 200px;

height: 200px;

background: #ddd;

}

</style>

<div id="demo2">

<ul>

<li><div></div></li>

<li><div></div></li>

<li><div></div></li>

</ul>

</div>

一般来说，我们都不喜欢看到最后有一条线，但是用样式去清楚那最后的线，非常麻烦，循环输出时，还要判断是否到结尾。

margin可以很好的解决这个问题。

直接上代码，不解释。