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

最終效果：

?

轉載于:https://www.cnblogs.com/xiandong/p/7608999.html

總結

以上是生活随笔為你收集整理的在一个div里，列表样式图片进行float，实现水平排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。