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

存档