li標籤橫排後如何去掉空白

今天在用<ul>和<li>標籤實現table的效果的過程中遇到這樣一個問題。解決問題之後想着留下一點記錄方便那些同樣也遇到這樣問題的朋友們。

問題描述：在將<li>標籤設置爲display:inline-block的時候，出現這樣一種情況，導致看起來非常不好看。如圖所示：

用Firebug發現它<li>與<li>之間會有一點點的空隙，這使我做出來的效果不美觀，當然，我並沒有將其設置爲float:left;（原諒我並不知道有這樣的做法。。。後來一試，這樣做也是可以的，但會使別的一些已經存在的樣式受到影響，在這裏暫時忽視這種解決辦法）

經過查閱資料，我得出導致出現這個問題的原因是瀏覽器會將inline之間的空白字符（空格換行tab）渲染成一個空格，空格自然會在頁面上產生寬度，我們寫代碼的時候習慣每個<li>都換一下行：

然後就得出三個解決辦法：

1.將所有<li>標籤寫在一行。會使代碼看起來很糟糕，past。

2.將ul裏面的字符尺寸設置爲0

.dialogTable ul {font-size:0px;}

問題解決，但是會有一個遺留的問題就是你將所有<ul>標籤裏面的字符大小都設爲0了，什麼字都看不到了。你還需要另外給別的字符設置大小。

3.將字符間隔清除

.dialogTable ul {
	letter-spacing: -4px;
}
.dialogTable li {
	letter-spacing: normal;
}

以上3種方法都可解決此問題。附上解決後的圖片：

是不是看起來效果好很多。。。