display: inline-block存在的间隙问题和解决方法

大家可能在ul搭配li里面遇到过这样的问题，如果想让li全部一行排列，一种方法是浮动，另一种是给li添加display: inline-block但是这个东西存在间隙
问题如图：

代码如下：

	
	
	


	

		
131
		
3123
		
123
		
123
		
1231
	

间隙大概是4px左右，针对这种问题，我给大家列举几种可靠的办法。

方法一

ul和li结构是这样的：

     

		  

		  123

		  i3123

		  312

		  1233

		  3123
 
	 

效果如下：

方法二

代码：

        

		   
3211
i3122
3123m3
31234
3125
  
		

效果如下：

这种排列方式和第一种基本是一致的，只是说结束标签的“>”成了另一行的起始标签。

方法三

结构如下：

32131
3123
3123
3123
3123

效果如下：

这样让他们都排列成一行，可以说是比较常用的办法了，比前两种好一点。

方法四

丢失标签
直接上代码：

        

			  
dwa
			  
daw
			  
daw
			  
daw
			  
dwad
		

效果：

这还是来源于html代码不严谨，但是XHTML就不一样了，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。

方法五

margin为负值

	
	
	


	    

		  
dwa
		  
daw
		  
daw
		  
daw
		  
dwad
		

效果如图：

很明显，li虽然已经解决了间隙的问题但是相对于ul已经出去了一点，而且在实际的开发当中还需要调节ul的位置，可能会影响到布局，这个还和字号有关系，个人还是不建议这种办法

方法六

利用给父级font-size:0；解决问题
代码如下：

	
	
	


	    

		  
dwa
		  
daw
		  
daw
		  
daw
		  
dwad
		

效果如下：

这个方法兼容ie，谷歌，火狐浏览器，但是不兼容safari，在其中还是会存在间隙的问题，这样就需要用letter-spacing:-Npx 来兼容safari,N的数值还是要根据字号的大小进行设置调整

方法七

letter-spacing: -Npx;解决问题
直接上代码：

	
	
	


	    

		  
dwa
		  
daw
		  
daw
		  
daw
		  
dwad
		

效果：

在当前元素的父元素中设置letter-spacing:-4px;其作用是可以控制文字间的水平距离，给子级设置letter-spacing:normal;是为了防止因为父级的-4px影响到子级的字体排列
但是具体的letter-spaceing:Npx;里面数值的大小还是要根据不同的字号进行调整

以上7种就是我总结的解决间隙问题的方法了
还有两点注意事项
1.在html代码中除去当前元素的空格或换行，该方法太麻烦，而且影响HTML代码的可读性，不赞成，后期代码维护起来还有改代码的时候可能会出现一系列的问题。
2.在当前元素的父元素中设置font-size:0;有可能在chorme中不支持，最好还是搭配上给父级设置letter-spacing:-4px;解决问题最好