在一個div裏,列表樣式圖片進行float,實現水平排序
阿新 • • 發佈:2017-09-29
無序 .cn oat 最終 highlight 忘記 href 鏈接樣式 pla
<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,實現水平排序