去除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