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>



效果

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


问题

我们可以看到元素间有空白，这是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>




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

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


后记

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


参考资料

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

inline-block 前世今生