关于li之间存在空白字符的问题
出现的问题如下图所示,可以很容易的看出来,就是在相邻的li之间是存在空的字符的
一、出现该问题的原因
当我们使用JS的children和childNodes这个属性的时候,是否发现了她们在FF浏览器下的结果并不相同,那么原因是什么呢?就是对于文本节点的处理的不同,上面的图也就很容易解释了9这个结果
那么对于就今天的问题,li之间出现距离的原因,就是因为空白字符的出现,也就是说因为我们在写li标签的时候的换行,而且空的字符的大小,就等于字体的大小,那么该如何解决呢?我们继续往下看
二、解决空白字符的问题
1. 设置font-size
在ul上面设置font-size
为0,在li上设置需要的font-size
的大小
ul {
font-size: 0;
}
ul li {
font-size: 1.2rem;
}
但是这种方法会使得在li的下面出现下边距
2. 将li的开始标签和结束标签不写在一行
<ul>
<li><a href="#">首页</a>
</li><li><a href="#">关于我们</a>
</li><li><a href="#">帮助</a>
</li><li><a href="#">更多</a>
</li>
</ul>
3.li不闭合
<ul>
<li><a href="#">首页</a>
<li><a href="#">关于我们</a>
<li><a href="#">帮助</a>
<li><a href="#">更多</a>
</ul>
未闭合的li会被浏览器解析为正确的形式
4. 设置负边距
ul li + li {
border-left: 1px solid #999;
margin-left: -3px;
}