CSS解决横向布局inline-block样式的li元素出现间隙的问题
写一个简单的横向布局导航栏对li元素指定属性display: inline-block来横向排布li元素。
ul li {
display: inline-block;
}
结果li元素之间出现间隙：
之所以会出现间隙，是由于无序列表项之间的占位符导致的：
对此我们有一下三种行之有效的解决之道：
- 通过代码写法避免间隙
闭合标签结尾写于下行之前
首尾相接避免间隙
- 弃用
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*/
}