追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


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 标签之间空白间隔的解决办法 « JavaScript变量 | 如何从0到1构建UI视觉层级?»


订阅Rss