li中插入img圖片間有空隙的解決方案
更新時(shí)間：2014年05月16日 10:23:35 作者：
在li中純放圖片img,出現(xiàn)的bug是圖片之間有3px的間隙,給li加高度也無效,解決圖片間有空隙方法如下:
直接加樣式img{vertical-align:bottom; display:block}
當(dāng)然在某些情況下無效,比如我要加三個(gè)圖片,上中下,中間的圖片是設(shè)為背景,發(fā)現(xiàn)用此方法無效,只是上和中的圖片空隙沒了,而下與中之間還存在,方法很簡單,把vertical-align:bottom改成top,可根據(jù)自己遇到的不同情況來設(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)文章
解決URL中含有-與號(hào)-不符合標(biāo)準(zhǔn)問題
解決URL中含有-與號(hào)-不符合標(biāo)準(zhǔn)問題...2006-09-09
stylelint是一個(gè)強(qiáng)大的現(xiàn)代CSS檢測器,可以讓開發(fā)者在樣式表中遵循一致的約定和避免錯(cuò)誤。本文將詳細(xì)介紹CSS代碼檢查工具stylelint2020-02-02
CSS圖片翻轉(zhuǎn)菜單...2006-09-09
CSS經(jīng)典實(shí)用技巧18招...2006-09-09
關(guān)于在HTML網(wǎng)頁制作中如何添加背景圖片
這篇文章主要介紹了關(guān)于在網(wǎng)頁制作中如何添加背景圖片,我們通常使用background來添加網(wǎng)頁的背景圖,需要的朋友可以參考下2023-04-04
解決input對(duì)齊問題vertical-alige
解決input對(duì)齊問題vertical-alige...2006-07-07
DOM屬性用法速查手冊...2006-10-10
空間頁面CSS說明...2006-09-09
這篇文章主要介紹了用css截取字符的幾種方法詳解,需要的朋友可以參考下2014-05-05
純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容
這篇文章主要介紹了純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容,需要的朋友可以參考下2014-05-05