<div class="xiangce"> <ul>
<li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> </ul>
</div>
这时一个div里面的列表图标链接样式，效果如下
a：用line-style：none，将无序列表样式前符号；总是忘记用哪个元素，line-style：noneline-style：noneline-style：noneline-style：noneline-style：none
b：在实现水平排列前，将a元素的文字部分置于图片的下方。
首先想到了用display设置成块级元素block，刚开始只设置了文字，并没有出现效果，于是将img也设置成block，然后就、、、好了、、、；通过text-align：center，让文字处于图片下方的中心；
c：最后对li设置float，让其靠左浮动float：left；
随后用margin调整在div的分布，现在只会在浏览器中，一边调一遍看，找到合适的位置，再回css中改数据、、、、
最终效果：
原文：http://www.cnblogs.com/xiandong/p/7608999.html