文章詳情頁(yè)
li中插入img圖片間有空隙的解決方案
瀏覽:138日期:2022-06-02 14:03:34
直接加樣式img{vertical-align:bottom; display:block}
當(dāng)然在某些情況下無(wú)效,比如我要加三個(gè)圖片,上中下,中間的圖片是設(shè)為背景,發(fā)現(xiàn)用此方法無(wú)效,只是上和中的圖片空隙沒(méi)了,而下與中之間還存在,方法很簡(jiǎn)單,把vertical-align:bottom改成top,可根據(jù)自己遇到的不同情況來(lái)設(shè)vertical-align的參數(shù)
方法一:
復(fù)制代碼 代碼如下:
img{vertical-align:top; display:block}
復(fù)制代碼 代碼如下:
<style>
#l1 {float:left;background:#000;}
#l1 ul li {list-style:none;padding:0;margin:0}
img {vertical-align:bottom; display:block;}
</style>
方法二:設(shè)置容器font-size:0(個(gè)人認(rèn)為這種方法最好!!!)
相關(guān)文章:
1. 關(guān)于HTML5的img標(biāo)簽2. CSS linear-gradient屬性案例詳解3. Linux下編譯安裝GraphicsMagick及PHP擴(kuò)展gmagick4. IntelliJ IDEA 2020如何設(shè)置背景圖片的方法步驟5. GIT相關(guān)-IDEA/ECLIPSE工具配置的教程詳解6. 使用Python3 poplib模塊刪除服務(wù)器多天前的郵件實(shí)現(xiàn)代碼7. Java 根據(jù)網(wǎng)絡(luò)URL獲取該網(wǎng)頁(yè)上面所有的img標(biāo)簽并下載圖片8. Java split函數(shù)拆分后變成null問(wèn)題解決方案9. 基于Java的Socket多客戶端Client-Server聊天程序的實(shí)現(xiàn)10. springboot CommandLineRunner接口實(shí)現(xiàn)自動(dòng)任務(wù)加載功能
排行榜
