HTML li 標(biāo)簽之間空白間隔的解決辦法

2019-9-20    seo達(dá)人

問(wèn)題描述:

做抽屜式菜單時(shí)候,在 ie 7 下發(fā)現(xiàn) li 元素之間會(huì)留白,如下圖:







原以為是樣式的問(wèn)題,后來(lái)看到有博文寫到“行框的排列會(huì)受到中間空白(回車\空格)等的影響,因?yàn)榭崭褚矊儆谧址?,這些空白也會(huì)被應(yīng)用樣式,占據(jù)空間,所以會(huì)有間隔”。







解決辦法:

li 標(biāo)簽之間的空白,可以通過(guò)設(shè)置 li 標(biāo)簽的 font-size 為 0,可以解決:



li{

    padding:0;

    margin:0;

    height: 30px;

    line-height: 30px;

    font-size: 0;          / 設(shè)置 font-size 為 0 即可 /

}

修改后的效果如圖:



藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔