HTML li 标签之间空白间隔的解决办法

2019-9-20    seo达人

问题描述:

做抽屉式菜单时候,在 ie 7 下发现 li 元素之间会留白,如下图:







原以为是样式的问题,后来看到有博文写到“行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔”。







解决办法:

li 标签之间的空白,可以通过设置 li 标签的 font-size 为 0,可以解决:



li{

    padding:0;

    margin:0;

    height: 30px;

    line-height: 30px;

    font-size: 0;          / 设置 font-size 为 0 即可 /

}

修改后的效果如图:



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档