css inline-block方式实现水平导航栏 解决空白问题

ul.mynav{
list-style-type: none;
/*所有字符包含空白符设置字体为0*/
/* font-size: 0; */
}

ul.mynav li{
/*设置inline-block*/
display: inline-block;
background-color: #008B8B;
line-height: 40px;
width: 140px;
text-align: center;
/*设置li中字体*/
/* font-size: 16px;
margin-right: 1px; */
}

ul.mynav li:hover,
ul.mynav li:active{
background-color: #87CEEB;
}

div代码

<ul class="mynav">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
</ul>

效果



问题

我们可以看到元素间有空白，这是li与li之间的空白节点。在西方排版中，行内以空格作为单词分界，在解析时，对空白字符(空格、换行、制表符)进行压缩，所以就留有1个空白，所以这是行内(inline)问题(inline-block本身当作inline，内部当作block处理)，只有行内才会对空白字符压缩。知道了空白的原因，自然而然就想到了以下两种解决方案

解决方案

1、因为空白也算字符，所以可以设置父元素的font-size:0，重新设置子元素的font-size。缺点，子元素需要重新设置字体，耦合度大。

ul.mynav{
list-style-type: none;
/*所有字符包含空白符设置字体为0*/
font-size: 0;
}

ul.mynav li{
/*设置inline-block*/
display: inline-block;
background-color: #008B8B;
line-height: 40px;
width: 140px;
text-align: center;
/*设置li中字体*/
font-size: 16px;
margin-right: 1px;
}

2、删除源代码中的空白。缺点，可读性差。

<ul class="mynav">
<li>菜单1
</li><li>菜单2
</li><li>菜单3
</li><li>菜单4
</li><li>菜单5
</li><li>菜单6</li>
</ul>

此处，我采用的第一种解决方案，效果如下



后记

现在的css4规范已经有white-space-collapse，如果浏览器实现了，那解决这个问题就简单了。

参考资料

有哪些好方法能处理
display: inline-block 元素之间出现的空格？

inline-block 前世今生