如何解决两个li之间的缝隙

如何解决两个li之间的缝隙的问题：

在做一个类似按钮左右滑动的选择器的动效，遇到了个是关于li之间的缝隙的问题：

HTML如下：

<span class="c1mChanger">
    <ul>
          <li>仅产品</li>
          <li>仅商品</li>
    </ul>
</span>

ＣＳＳ如下：

.c1mChanger{
    width: 120px;
    height: 30px;
}
.c1mChanger ul{
    width:120px;
    height: 30px;
}
.c1mChanger ul li{
    display: inline-block;
    text-align: center;
    line-height: 30px;　　
}
.c1mChanger ul li:first-child{
    border: 1px solid #009843;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.c1mChanger ul li:last-child{
    border: 1px solid #009843;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

显示的效果如下：

明显两个li之间有一个缝隙，经过仔细检查发现有如下3种解决方式：

1、在css样式里要使用margin:0;padding:0去除浏览器的默认值;     *{margin:0;padding:0;}      /*通配符margin和padding都设为0*/

2、在li设置：float: left;  list-style: none;

3、那个距离可能是空白节点，可以把li连着写，不要换行

 

总结如下：

保险起见，最好是三者都写上。