最常用的一种方法：就是浮动,浮动之后会自动往右挤，挤不下就到第二行了。    
     <ul>
           <li>第一张图片</li>
           <li>第二张图片</li>
           <li>第三张图片</li>
           <li>第四张图片</li>
           <li>第五张图片</li>
           <li>第六张图片</li>
           <li>第七张图片</li>
           <li>第八张图片</li>
    </ul>
<style>
ul{width:800px; height:200px;}
li{width:195px;height:98px;margin:1px auto; float:left;list-style-type:none}
</style>


myul li{float: left;width:220px;height:auto;display:block;float:left; margin-left:10px;margin-bottom:5px; text-align:center;}
给li加个左浮动就OK了
float: left;


<ul id="list">
    <li><a class="pic" href="#"><img src="" alt="" /></a><p class="title">水电费爽肤水方式是否</p></li>
    <li><a class="pic" href="#"><img src="" alt="" /></a><p class="title">水电费爽肤水方式是否</p></li>
    <li><a class="pic" href="#"><img src="" alt="" /></a><p class="title">水电费爽肤水方式是否</p></li>
</ul>

#list li{float:left;width:100px;padding:6px;list-style:none;}
#list li .pic{display:block;width:80px;margin:0 auto;border:1px solid #cccccc;padding:2px;}
#list li .pic img{width:80px;height:80px;}