CSS：li标签之间横向排列时存在间距
问题需要总结，知识需要沉淀
问题描述：
在使用无序列表ul创建导航栏时，li标签之间存在间距
产生原因：
浏览器会把HTML中的多个空格或者换行解析为一个空白，即
ps:此处的问题涉及HTML跟CSS两个方面，问题是由于浏览器对于HTML中的空格解析产生的，但是需求是解决页面的布局问题，所以这里还是将本文归类到CSS方面。
Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dome</title>
<style type="text/css" charset="utf-8">
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
ul :nth-child(odd) {
background-color: hotpink;
}
ul :nth-child(even) {
background-color: lightgreen;
}
li {
display: inline;
}
</style>
</head>
<body>
<nav>
<ul>
<li>导航栏1</li>
<li>导航栏2</li>
<li>导航栏3</li>
<li>导航栏4</li>
<li>导航栏5</li>
</ul>
</nav>
</body>
</html>
Effect:
_D__demo_problem_demo_li.html.png
解决方案
HTML角度
思路是不在HTML文档中产生空白
- 1.
<li></li>与`<li></li>之间不使用换行
sample code:
<ul>
<li>导航1</li><li>导航2</li><li>导航3</li>
</ul>
- 2.将
<li></li>与<li></li>之间空白注释掉
sample code:
<ul>
<li>导航1</li><!--注释空白
--><li>导航2</li><!--注释空白
--><li>导航3</li>
</ul>
note:以上两种方式可以简单粗暴的解决问题，但是影响代码的可读性，不利于维护，不够优雅，不推荐使用。
CSS角度
-
1.对全部
li标签进行浮动。
问题：虽然CSS中所有元素都是可以浮动的，但是浮动会生成块级框，不论它本身是什么元素，这就限制了浮动的使用。 -
2.为
ul标签设置font-size: 0，li中重新设置font-size: 16px覆盖继承。
问题：因为在ul中设置了font-size: 0,所以就不能在li中设置font-size: 1em，只能设置font-size: 16px，不利于响应式设计。 -
3.为
ul标签设置letter-spacing: -4px，li中重新设置letter-spacing: normal覆盖继承。
Effect:
_D__demo_problem_demo_li.html.png
问题：个人比较推荐这个解决方法，实际项目中还是要根据情况选择不同的解决方式。
note:这个方法也存一点问题，在这里letter-spacing: -4px中的-4px是浏览器在默认设置的情况下，一个空白字符的宽度是4px，但是如果用户浏览器的设置不是默认设置，（比如更改默认字体的大小就会导致在浏览器中空白的大小改变），这个值很有可能不够大，导致在某些用户的浏览器中仍会存在间隔，我个人认为比较合适的数值是-0.5em，这样会根据当前代理的字体大小来控制间隔。
在参考前辈的笔记时我也发现关于这个数值是有有多个不同的推荐；本着实践精神，我在Chrome和Firefox中作了对比，实践中发现只要这个值超过空白的宽度之后效果都是一样的，也就是说只要保证这个值比所有的浏览器实现的一个字符宽度要大就是可以的。也就意味着你也可以设置一个远远大于4px的值也是没有什么问题的。**
ps:有兴趣可以看看这篇关于空白字符的深入探索的笔记。
