零基础建站培训介绍

当前位置:

消除HTML5 li 标签横排后空隙的办法

我们在做网站时,网站上的列表都是用LI标签来做的,使用li标签制作了列表之后,会发现在 ie 7 下发现 li 元素之间会留白,如下图:

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

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

解决办法:

li 标签之间的空白,可以通过设置 li 标签的 font-size 为 0,可以解决:(如果对HTML不了解,可以学习一下HTML入门教程

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

修改后的效果如图:HTML5 li 标签之间空白间隔的解决办法

上一课: 下一课:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 我们在做网站时,网站上的列表都是用LI标签来做的,使用li标签制作了列表之后,会发现在 ie 7 下发现 li 元素之间会留白,如下图:原以为是样
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote
  • HTML粗体标签:HTML b 标签b 标签-- 定义粗体文字 不符合标准网页设计的理念,不赞成使用. b标签是成对出现的,以<b>开始,以</b>结束 .
  • HTML换行标签:<BR/>br 是换行(Break)的缩写。文本会在这个标签的地方换行。在HTML代码里直接换行的话,按浏览器的不同可能显示为一个空格,或
在线
客服
手机二维码 手机二维码
返回顶部 返回顶部

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛客服李欣蓉QQ:2289556365

或者使用微信扫码咨询

x

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛客服孙丽QQ:2399118408

或者使用微信扫码咨询

x

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛客服刘淼淼QQ:1135082670

或者使用微信扫码咨询

x

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛讲师张启亚QQ:2357852508

或者使用微信扫码咨询

x

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛讲师方重华QQ:1730401718

或者使用微信扫码咨询

x

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛讲师唐超QQ:909722045

或者使用微信扫码咨询

x

温馨提示

为防止临时会话收不到QQ信息,请加QQ好友咨询
论坛讲师赵鹏QQ:614862774

或者使用微信扫码咨询

x

微信咨询

可使用微信扫下方二维码加好友咨询。

x