無法識別水平菜單中的鏈接之間的奇怪空間

我正在創建簡單的水平菜單。當我懸停項目時，它會改變背景顏色，但會在鏈接左側留下一些奇怪的3px空間，我無法確定它顯示的原因以及如何將其刪除。無法識別水平菜單中的鏈接之間的奇怪空間

菜單是在這裏：http://pokerzysta.site44.com/（Linki, Posty, Forum, Dodaj）任何想法有什麼錯呢？

2013-02-05 Marcin Doliwa

使用此** ** HTML代碼

工作演示：http://jsfiddle.net/enve/Dkfys/ – Enve

那是因爲您以水平方式顯示列表display: inline-block;。呈現的是HTML標記中的空白（最有可能是li-tags之後的換行符）。

如果你把你的HTML鋰標籤沒有空白和換行符不會出現這種情況：

<ul id="main-menu" class="horizontal-list fleft"> 
    <li><a href="#">Linki</a></li><li><a href="#">Posty</a></li><li><a href="#">Forum</a></li><li><a href="#">Dodaj</a><li> 
</ul>

@cimmanon指向克里斯Coyier一大篇關於水平顯示列表導航：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2013-02-05 12:55:47 kleinfreund

參見：http://css-tricks.com/fighting-內聯塊之間的空間元素/ – cimmanon

另外對這篇文章的評論是非常好的，並提供有關此主題的更多信息。我編輯你的鏈接到我的答案，所以它更容易記下。 – kleinfreund

這真的很奇怪，感謝您的鏈接和答案。 –

LI元素之間有空格。通過去除他們或使用

float: left;

還將求解問題（但你UL後，你應該使用一個明確的：兩者）

來源

2013-02-05 13:01:11 shutter

你的鏈接是內聯塊，所以HTML空白實際使用空間;）一簡單的一招是將字體大小設置爲0的UL和重置在李的

你的情況

合適的字體大小：

.horizontal-list { 
    font-size: 0; 
} 

.horizontal-list li{ 
    font-size: 17px; 
}

來源

2013-02-05 13:05:57 meo

無法識別水平菜單中的鏈接之間的奇怪空間

回答

相關問題