CSS網格式導航菜單間距

我想創建一個網格式導航菜單，我已經完成了。這是我迄今爲止的jsFiddle。如果將鼠標懸停在鏈接上，可以看到左側和右側列之間存在1或2像素的間隔，我似乎無法擺脫它。CSS網格式導航菜單間距

目前我有：

#nav { 
    float:left; 
    width:230px; 
    display:inline; 
    text-align:right; 
} 

#footer li { 
    display:inline-block; 
    text-align:left; 
    line-height:32px; 
    text-indent:10px; 
    width:49%; 
}

如果我設置li {width:50%}列表不適合2列，但是當它被設置爲49％，我得到列表元素之間的差距。某處有一些填充或邊距，但我看不到它。任何幫助都會很棒。

來源

2013-11-15 tomsullivan1989

這是因爲'inline'元素尊重標記中的空白..這是你想要的..我沒有改變任何CSS .. http://jsfiddle.net/JoshC/3XqZ3/10/？ [看到這個答案]（http://stackoverflow.com/questions/19038799/unexplainable-gap-between-divs/19038859#19038859） –

'display：inline-block'是你的罪魁禍首。它將在每個塊元素之間放置一個空格。 – Ally

我最喜歡的解決這個的方法是使用在父font-size: 0，然後恢復在字體大小孩子。會發生什麼情況是，您的html代碼中的物理空間（例如，在元素後按Enter）會在代碼中呈現物理空間，也就是li之間的空間。 font-size: 0將該空間呈現爲沒有物理寬度，因此允許兩個50％。

#nav { 
    font-size: 0; 
} 
#nav ul li { 
    font-size: 15px; 
}

檢查出來：http://jsfiddle.net/3XqZ3/9/

另一種選擇是使用浮動來獲得元素直到彼此相鄰。這也擺脫了之間的空間。

#nav ul li { 
    float: left; 
}

第三種選擇是確保html中元素之間沒有中斷。像：

<li>This is an li</li><li>This is another li</li>

或者：

<li>This is an li</li><!-- 
--><li>This is another li</li>

來源

2013-11-15 16:10:18 Chad

您應該使用，而不是顯示浮動，就像這樣：

#footer li { 
    text-align:left; 
    line-height:32px; 
    text-indent:10px; 
    width:49%; 
    float: left; 
}

演示：http://jsfiddle.net/3XqZ3/11/

來源

2013-11-15 16:09:25 Duver

即白的空間由您inline-block秒。因爲它們是「內聯」的，所以您的空白空間會被考慮在內。

有很多方法可以解決這個問題。一是註釋掉空白：

<li class="green"><a href="#">Home</a></li><!-- 
--><li class="green"><a href="#">FAQs</a></li>

JSFiddle

或者你可以使用浮動：

#footer li { 
    float:left; 
}

JSFiddle

來源

2013-11-15 16:12:16 George

CSS網格式導航菜單間距

回答

相關問題