去除display:inline-block的间隙问题

inline-block元素间间距demo

<!-- html -->

<ul>  
 <li>item1</li>  
 <li>item2</li>  
 <li>item3</li>  
 <li>item4</li>  
 <li>item5</li>
</ul>

<style>
ul{list-style: none;}
li{display: inline-block;}
</style>

方案 1

ul:{
font-size:0;
}

方案 2

<ul>  
 <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li>
</ul>
//or
<ul>  
 <li>item1</li><!--
--><li>item2</li><!--
--><li>item3</li>
</ul>

方案 3

li {margin-right: -3px;} 

-3px,该值与父级字体大小有关

方案 4

<ul>  
 <li>item1 
 <li>item2 
 <li>item3
 <li>item4 
 <li>item5
</ul>

6 其他更多方案 more