解决HTML中li标签空白间隙问题

首页 / 电子信息 / 正文

  最近开发新主题的过程当中,碰到一个很神奇的问题。li标签中间会有空白间隙。后来查询资料才得知,li标签为块级元素,当其转化为inline-block元素是会出现空白文本节点,在一些浏览器中无法察觉,如Chrome、Edge等。不过你用鼠标选中,还是可以看到的:

空白间隙

  FireFox可以直接看到空隙:
FireFox空白间隙

  原因是由于:浏览器的默认行为是把inline元素间的空白字符,如空格、换行等渲染成一个空格,li标签在换行后产生新的字符,产生一个空格,占用一个字符的宽度。

解决方案

方法一:将li标签全部写在一排

既然是因为换行导致的,那就可以将代码全部写在一排,像这样:

<div class="wrap">
<h3>li标签空白测试</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>

但是这样可读性差、难以维护、逼死强迫症和洁癖。

方法二:将父元素font-size属性设置为0

  空白元素节点的字体设置为0 ,自然不占宽度也就不会产生白边了,但是这样不是所有浏览器都能成功的,如一些低版本的浏览器仍会产生空白缝隙。

.wrap ul{font-size:0px;}

我比较推荐第二种方法,设置完成后效果如下:

效果

打赏
评论区
头像
    头像

    还有一种方法,对父元素设置 display: flex 布局就好啦

    头像
    墨铺
    1周前
    回复

    会开发的都是大牛,我们只会拿来用

    头像

    原来如此,学习到了。

    头像

    新主题喔?