<li>标签做横向导航栏时中间有间距的原因和解决方案

前端开发中，当我们用<li>来实现横向导航栏的时候，总是发现中间会出现一条间隙，效果图如下：

下面是这个效果图的代码，可以发现此时每个<li>之间都出现了间隔。

<style>
	ul{
	    background-color: black;  
	    width: 500px;  
	    height: 30px;
	    border: 1px solid;
	}
	ul>li{
	    background-color: white;  
	    list-style: none;  
	    display: inline-block;
	    width: 100px;  
	    height: 30px;  
	    text-align: center;  
	    line-height: 30px;
	}
</style>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

引发这种问题的原因是：<li>标签之间存在间隙，每个标签是不连贯的，存在空格。

所以我们的解决方案如下：

一：既然是因为间隙，最直接的就是去掉间隙。如下。

       

<ul>
	<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

或者

<ul>
	<li>1</li><!--
	--><li>2</li><!--
	--><li>3</li><!--
	--><li>4</li><!--
--></ul>

这种方法虽然解决了标签之间的间隙，但是感觉代码的排版杂乱，而且实际开发中比较繁琐。

二：将<li>的父标签，也就是<ul>标签的属性 font-size：0，再给 li 标签设置 font-size：...px，代码如下：

<style>
	ul{
	    background-color: black;  
	    width: 500px;  
	    height: 30px;
	    border: 1px solid;
	    font-size: 0;
	}
	ul>li{
	    background-color: white;  
	    list-style: none;  
	    display: inline-block;
	    width: 100px;  
	    height: 30px;  
	    text-align: center;  
	    line-height: 30px;
	    font-size: 14px;
	}
</style>

三：这个方法就方便多了，给 li 标签设置 float:left; 属性，我的开发中一般都是用这个方法。

<style>
	ul{
	    background-color: black;  
	    width: 500px;  
	    height: 30px;
	    border: 1px solid;
	}
	ul>li{
		background-color: white;  
	    list-style: none;  
	    display: inline-block;
	    width: 100px;  
	    height: 30px;  
	    text-align: center;  
	    line-height: 30px;  
	    float: left;
	}
</style>

tips：font-size:0;还可以解决图片元素img排列时候出现的间隙问题。给img的父级元素设置font-size:0;即可解决间隙问题。