在看W3school时，看到一个很好的例子，如何制作一个水平的导航栏？没有任何要求，只需要达到下面的效果：
我认为这个例子包含了很多css布局需要了解的知识，因此单独写一下。
W3school上面的方法是这样的——全部设置浮动：
DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
style>
head>
<body>
<ul>
<li><a href="#home">Homea>li>
<li><a href="#news">Newsa>li>
<li><a href="#contact">Contacta>li>
<li><a href="#about">Abouta>li>
ul>
body>
html>
这个涉及到浮动的知识，这里不详述了。但是，还有没有其他方法呢？我想到另外一种方法，不用ul，直接把a设置为inline-block不就行了吗（原本的inline显然不行，因为不能设置长度，会导致大小不一）？
于是，我把代码改成了下面：
DOCTYPE html>
<html>
<head>
<style>
a
{
display:inline-block;
width:60px;
background-color:#dddddd;
}
style>
head>
<body>
<a href="#home">Homea>
<a href="#news">Newsa>
<a href="#contact">Contacta>
<a href="#about">Abouta>
body>
html>
但是，得出来的结果不如人意：
中间的间隙并不是我想要的（虽然实际开发中这些间隙也许会使布局更加美观），但这些间隙是因何而来？我上网查了一下，发现原来inline-block之间出现间隙的原因是标签之间的空格：
a>
<a href="#news">
像这里两行之间就会被视作一个空格了，我们只需要消除HTML标签之间的空格就可以解决这个问题了。
这个网址很好地概括了消除inline-block元素间间距的方法：
http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
其中，我认为第一种方法是最好的：
像这样：
<body> <a href="#home"> Homea><a href="#news"> Newsa><a href="#contact"> Contacta><a href="#about"> Abouta> body>
或者：
<body> <a href="#home">Homea ><a href="#news">Newsa ><a href="#contact">Contacta ><a href="#about">Abouta> body>
再或者使用注释：
<body> <a href="#home">Homea><a href="#news">Newsa><a href="#contact">Contacta><a href="#about">Abouta> body>
这样，我们就有两种方法写水平导航条了。当然方法还有很多，这篇博客最主要还是用来提及消除inline-block元素间间距的方法。