最近在学习如何制作导航条，并不太喜欢使用float这种方法，因为带来的副作用有点大。毕竟float出现的本意是为了解决文字浮动的效果。所以我选择使用inline-block来让竖直的li列表变成水平状。 所以，问题产生了。
<style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } li{ background-color: blue; display: inline-block; margin: 0; padding: 0; } </style> <script> </script> </head> <body> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>这样简单的一段代码却在li标签之间产生了一小段很诡异的间隙。打开chrome的开发者平台，并没有发现哪个属性对其产生了影响。正当困惑之际，我随手改变了一下li的代码书写。
<style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } li{ background-color: blue; display: inline-block; margin: 0; padding: 0; } </style> <script> </script> </head> <body> <ul> <li><a href="#">首 页</a></li><li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>奇迹出现了…li之间的空隙居然消失了！直到此时才发现，原来这个间隙是由于html中的回车和空格造成的。但是由于语义化的要求和便于检查的目的，我们不可能将所有的li都排在一行。 那么有没有其他的办法来解决这个问题？ 通过设置其父级元素的font-size为0也可以解决这个问题。
<style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } ul{ font-size:0; } li{ background-color: blue; display: inline-block; margin: 0; padding: 0; } </style> <script> </script> </head> <body> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>这个办法看上去不错，暂时也没发现有什么其他的副作用。挺好的，又解决一个问题。
