指引网

当前位置: 主页 > 网页制作 > WEB开发 >

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

来源:网络 作者:佚名 点击: 时间:2017-08-01 21:39
[摘要] 在抽屉式菜单时候,在 ie 7 下发现 li 元素之间会留白,如下图: 原以为是样式的问题,后来看到有博文写到“行框的排列会受到中间空……

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

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

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

解决办法:

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


li{ padding:0; margin:0; height: 30px; line-height: 30px; font-size: 0; /* 设置 font-size 为 0 即可 */}
------分隔线----------------------------