li上设定样式display:inline-block时左边出现莫名空格以及其解决方法

如题,为了使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时左边出现莫名空格以及其解决方法)