CSS中＜li＞标签横向排列出现间距问题

ul{
    padding: 0;
    margin: 0;
    background-color: rgb(3, 147, 190);
}
li {
    list-style: none;
    background-color: rgb(255, 0, 140);
    display: inline;           
}

<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
    <li>eeee</li>
</ul> 

处理之前是如下图的效果：

经过百度知道，中间出现间距的原因：</li>标签和<li>标签之间有空格引起。

解决办法有三个：

方法一：所有成对出现的<li>标签都横向排列，就可以解决，例如：

<li>dddd</li><li>eeee</li>

 第二个方法：

将 li 的父元素，字体大小设置为0 font-size:0;

然后再将 li 标签的 字体大小在设置回来原来的大小（例如：16px）font-size:16px;

然后所有的间隙就和上啦。

第三个方法：

就是将 </li>和<li> 之间的空格注释起来：例如：

<ul>
    <li>aaaa</li><!--
    --><li>bbbb</li><!--
    --><li>cccc</li><!--
    --><li>dddd</li><!--
    --><li>eeee</li>
    <li>ffff</li>
</ul> 

效果如图，元素之间空格被注释掉的就没有间隙了，最后一个元素和倒数第二个元素没有注释，所以存在间隙。