css无法等分导航栏的解决办法

今天写导航栏的时候，需要将导航栏等分为五份，均匀显示在浏览器当中，很自然的想到将li元素设置为display：inline-block，width：20%；
出现了下面的情况：li元素无法显示在一行
查看资料之后，发现是空白节点的问题。Mdn对空白节点的解释如下：

在Mozilla 的软件中，原始文件里所有空白符都会在 DOM 中出现（不包括标签内含的空白符）
有些空白符会自成一个文本节点。
有些空白符会与其他文本节点合成为一个文本节点。

DOM将空白节点当做文本节点来处理。因此，我们可以通过处理文本节点来处理空白节点。要消除li间的文本节点，只需要将li的容器，即ul的font-size设置为0。（之后要重新设置li的font-size以便字体正常显示）
操作后的显示结果：

正确的代码：

<div id="navigation">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="photos.html">Photos</a></li>
		<li><a href="live.html">Live</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</div>

/*导航栏*/
#navigation ul {
	width: 100%;
	font-size: 0;
	list-style: none;
	color: #FFF;
	background: #777;
}
#navigation li {
	width: 20%;
	display: inline-block;
}
#navigation li:first-child {
	background: red;
}
#navigation li a {
	font-size: 14px;
	text-decoration: none;
	color: #FFF;
}