li之間產生的間隙問題的解決方法

場景：有這樣一串代碼：

<ul>
    <li><a href="#">登錄</a></li>
    <li><a href="#">快速注冊</a></li>
    <li><a href="#">關於</a></li>
    <li><a href="#">幫助</a></li>
    <li><a href="#">App下載</a></li>
</ul>

給li添加inline-block后，制作了這樣一個導航欄：

 

 

 看着沒有什么問題。但是當我們將a標簽添上背景，再將其放大，如下：

 

 

 

 

 

 這時候發現，在每個li之間都會有一條小縫。我們現在要解決的就是這樣一條小縫隙了。當然如果覺得這條小縫可以接受的也可以不解決。

原因：

這條間隙出現的原因是html中的空白字符。在每個li之間是有一個換行符的，這種換行符被定義為一個空白符。然后在inline-block時，就產生了間隙。

 

 

解決：

既然知道時空白符造成的，解決掉這個空白符就行了。

方法1：將每個li都寫在同一行，這不就沒有換行符了嗎。

<ul>
    <li><a href="#">登錄</a></li><li><a href="#">快速注冊</a></li><li><a href="#">關於</a></li><li><a href="#">幫助</a></li><li><a href="#">App下載</a></li>
</ul>

 

 

 問題解決了，但是這樣的代碼看起來真是要命。所以不是好的解決方法。

方法2：將閉合的</li>放到下一個<li>之前，也沒有換行符了。

<ul>
    <li><a href="#">登錄</a>
    </li><li><a href="#">快速注冊</a>
    </li><li><a href="#">關於</a></li>
    </li><li><a href="#">幫助</a>
    </li><li><a href="#">App下載</a>
</ul>

這樣子也是可以的。

方法3：去掉閉合，使Html為我們閉合它。

<ul>
    <li><a href="#">登錄</a>
    <li><a href="#">快速注冊</a>
    <li><a href="#">關於</a>
    <li><a href="#">幫助</a>
    <li><a href="#">App下載</a>
</ul>

 

 

空白符歸根結底也是字符，會受到font-size影響。

方法4：使這個換行符的font-size變成0。通過改變父節點的font-size來實現。

ul{
    font-size:0;
}
li{
  font-size:16px;/*注意要設置這一條*/  
}

 

 這種方法也可以解決間隙問題，但也產生了新的問題，就是出現了下面的間隙。

 

方法5：設置負的邊距。

直接使li偏移也是可以的。