在html页面中做水平导航条时，需要使块元素并排显示,从而用到浮动,然而块元素浮动给边距(margin)的时候出现加倍的BUG,即会引起空白问题，要解决的话请看下面文章介绍的三种方法。
首先，制作一个水平的导航条
做法：使用li，设置inline-block使li横向显示代码如下：
复制代码 代码示例:
01.<style type="text/css">
02. li {
03. border:1px solid #000;
04. display:inline-block;
05. *display:inline; /*for IE6、IE7*/
06. zoom:1; /*for IE6、IE7*/
07. }
08.</style>
09.<ul>
10. <li>链接</li>
11. <li>链接</li>
12. <li>链接</li>
13. <li>链接</li>
14. <li>链接</li>
15.</ul>
上面运行结果是除了IE6、IE7以外的浏览器，每个li之间都有一段空白。
注：IE6、IE7不支持inline-block;所以不会出现问题。
解决方法一般有三种：
1.将源代码中所有的li都放在同一行：
复制代码 代码示例:
01.<ul>
02. <li>链接</li><li>链接</li><li>链接</li><li>链接</li><li>链接</li>
03.</ul>
2.换一种方式格式化源代码：
复制代码 代码示例:
01.<ul>
02. <li>链接</li
03. ><li>链接</li
04. ><li>链接</li
05. ><li>链接</li
06. ><li>链接</li>
07.</ul>
3.设置ul的font-size为0，再设置li的font-size为正常值
复制代码 代码示例:
01.<style type="text/css">
02. ul {
03. font-size:0;
04. }
05. li {
06. display:inline-block;
07. border:1px solid #000;
08. font-size:14px;
09. }
10.</style>
这样，空白就被去掉了。
