相信大家經常用到ul li來製作信息列表,今天有一個同事問我一個這樣的問題”li列表設置了行高,但每行後面都有4px的空白間隙“。n年前,我也曾遇到過這樣的問題,今天就把它記錄下來吧。
ul li{
clear:both;
overflow:hidden;
height:32px;
line-height:32px;
background: url(../images/arrow.png) left 9px no-repeat #f2e1ff;
}
這段css在各瀏覽器中的顯示如圖:
如何把li行之後的4px空白除去呢。So easy呀
加上”vertical-align:bottom“
style:
ul li{
clear:both;
overflow:hidden;
height:32px;
line-height:32px;
background: url(../images/arrow.png) left 9px no-repeat #f2e1ff;
vertical-align:bottom
}