如题，为了使li水平展示，在不使用浮动的情况下，给li添加display:inline-block样式时，除了第一个li外，其后li均会出现左侧有莫名大约8px宽的空格的问题，代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 <style> 7 body, ul { 8 padding: 0; 9 margin: 0; 10 } 11 .item { 12 display: inline-block; 13 border: 1px solid #000; 14 padding: 5px; 15 } 16 </style> 17 </head> 18 <body> 19 <div> 20 <ul> 21 <li class="item">1</li> 22 <li class="item">2</li> 23 <li class="item">3</li> 24 <li class="item">4</li> 25 <li class="item">5</li> 26 </ul> 27 </div> 28 </body> 29 </html>
在chrome，Firefox，IE8~IE11上均有此现象，
解决方法，可在ul上设置样式为font-size: 0，在li上设置合适的font-size即可
li上设定样式display:inline-block时左边出现莫名空格以及其解决方法
原文：http://www.cnblogs.com/aissd/p/5025424.html