<div id="menuNav"> 
    <ul id="menuNav-ul"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
    </ul> 
</div>

我有一個的jsfiddle，我在這裏提出：，我無法將其刪除

http://jsfiddle.net/agzF5/

如果你將鼠標懸停在不屬於第一的菜單項鍵入你會注意到，如果設置了邊框，會出現一些奇怪的邊距，我想知道如何刪除它？

馬特

來源

2014-01-30 Matthew

'背景：淺灰重複-X;'真的嗎？ –

JSFiddle here

你有你的列表項的顯示：inline-block的;

我已經把它們左移了，增加了顯示：block;並改變了包裝元素的一些屬性。所以它仍然包含浮動元素，請參見下文。

#menuNav-ul { 
    background: lightgrey repeat-x; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    border-bottom: 2px solid darkgrey; 
    display:block; 
    overflow:hidden; 
} 

#menuNav-ul li { 
    display: block; 
    border-right: 1px solid #bfbfbf;  
    margin: 0px; 
    padding: 0px; 
    float:left; 
}

來源

2014-01-30 16:50:34 Dijon

真棒，非常感謝你的解釋，它可以工作數百！ – Matthew

添加

html, body{margin:0;}

頂端，身體本身就應該很可能工作以及..

來源

2014-01-30 16:46:56 Tsasken

woops，誤讀了這個問題..我的壞.. – Tsasken

你設置你的LI元素是display:inline-block這意味着他們將有他們之間的行內空白空間（通常〜4像素）。

3的解決方案：

1. LIVE DEMO

添加font-size:0;到UL
重置字體大小到PX爲LI元件

2.不加display:inline-block;但是float:left;你的LI元素

3.（不推薦）添加-4px利潤率左到您的LI元素

PS：額外的建議是不要樣式（顏色，邊框等），你LI元素。把它們當作簡單定位的容器來裝飾你的風格<a>元素。

來源

2014-01-30 16:52:39

使用float而不是inline-block函數真的是個好主意嗎？ – Matthew

其他人已經回答了很好的解決方案。

我想離開這裏，以防它幫助別人。

原因是你的標記中有空白（完全正常），這種內聯塊呈現爲空格。

如果您正在使用內嵌塊元素，則可以將父級的字體大小設置爲0，然後將子元素的字體大小明確設置爲解決此問題的方法。

來源

2014-01-30 16:53:30 mattbeck

好簡單的解決方案是貴麗項目之間添加評論：

<div id="menuNav"> 
    <ul id="menuNav-ul"> 
     <li><a href="#">Home</a></li><!-- 
     --><li><a href="#">Page 1</a></li><!-- 
     --><li><a href="#">Page 2</a></li> 
    </ul> 
</div>

檢查它在行動：http://jsfiddle.net/agzF5/7/

來源

2014-01-30 17:19:16

，我無法將其刪除

回答

3的解決方案：

相關問題