<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中改數據、、、、

最終效果：

在一個div裏，列表樣式圖片進行float，實現水平排序