导航栏问题求指导

第一张图片，是自己做的。导航栏之间有间隙，消除不了。这个间隙是怎么产生的？后两张是抄的代码。为什么把<li>改为{display:inline;},然后<a>元素向左浮动，间隙就没有了？。或者把<a>改为{display:block;}，<li>向左浮动，间隙也没有了？求大神指点，不胜感激