如何解決兩個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連着寫，不要換行

 

總結如下：

保險起見，最好是三者都寫上。