在一个div里，列表样式图片进行float，实现水平排序

Posted 2020-10-08

<div class="xiangce">
　　<ul>

　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
　　　　<li><a href="#"><img src="images/pic4.gif" alt="">产品名称</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中改数据、、、、

最终效果：