CSS小知识---解决横向布局inline-block样式的li元素出现间隙的问题

写一个简单的横向布局导航栏对li元素指定属性display: inline-block来横向排布li元素。

ul li {
  display: inline-block;
}

结果li元素之间出现间隙：

之所以会出现间隙，是由于无序列表项之间的占位符导致的：

对此我们有一下三种行之有效的解决之道：

1. 通过代码写法避免间隙

闭合标签结尾写于下行之前
<ul>
      <li><a href="">Home</a></li
      ><li><a href="" class="active">News</a></li
      ><li><a href="" class="active">Content</a></li
      ><li><a href="" class="active">About</a></li>
</ul>

首尾相接避免间隙
<ul>
      <li>
            <a href="">Home</a></li><li>
            <a href="" class="active">News</a></li><li>
            <a href="" class="active">Content</a></li><li>
            <a href="" class="active">About</a></li>
</ul>

2. 弃用display改用float属性一步到位

ul li {
  float: left;
}

不要忘了使用clearfix清除浮动影响。
3. font-size的覆盖

ul { font-size:0; }
li { font-size:16px; }

这种方法唯独对于afari兼容性较差，所以我更建议使用兼容写法：

ul{
   letter-spacing:-npx;/*jquery方法，兼容safari*/
}