解决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;}

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

效果

打赏
评论区
头像
    头像
    不吃芒果
    2022年09月02日 11:00
    回复

    我也姓赵

    头像
    CJHONG
    2022年08月28日 08:40
    回复

    重点: 新的主题,欸嘿q(≧▽≦q)