关于li之间存在空白字符的问题

关于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;
}