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

2019-9-20    释然 前端及开发文章及欣赏

问题描述:
做抽屉式菜单时候,在 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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档