Navbar刪除間距 - CSS或JavaScript？

所以我有這個導航欄;我有一個Jsfiddle來演示。如果將鼠標懸停在某個元素上，則會出現該子列表，但如果仔細觀察，其左側邊緣在召喚它的導航欄元素前方只有1個像素。Navbar刪除間距 - CSS或JavaScript？

是否有任何CSS規則我可以添加擺脫這一點，即將子列表移回像素？我知道可以用JS實現這一點（獲取每個導航欄元素，計算其距左側的距離，取其子列表並給它一個比元素的左側值小1），但現在我想現在就避免它。

如果可能的話，我更喜歡CSS解決方案，但當然它不是，請告訴我，如果可以的話，提供一個JS替代方案。

來源

2012-06-08 Bluefire

強制添加margin-left: -1px;到您的#nav li:hover ul將其向左推1個像素。

see it working here.

來源

2012-06-08 07:43:29 oezi

啊右邊緣是我嘗試的第一件事，但我認爲他們沒有工作，因爲我將規則附加到錯誤的元素D：所以感謝幫助，現在我知道在哪裏添加規則：D – Bluefire

如果刪除所有邊框，問題就會消失。因此，答案可能在於重新設計你的HTML/CSS邊框使用

看到這個revided JSFiddle

如果你只是想要一個快速和骯髒的修復，你可以添加以下到您的原始CSS

#nav li { 
    float: left; 
    position:relative; 
    left:-1px; 
}

來源

2012-06-08 07:41:19 Brad

如果刪除了邊框，則完整的設計更改。這顯然不是一個好的解決方案，因爲它只能隱藏問題而不是解決問題。 – oezi

我使用針對您的特定修復程序更新了答案。在您的CSS中放入太多「-1px」修復可能會導致瀏覽器之間的不一致。如果你使用'嚴格'DocType你應該沒問題。 – Brad

切緣陰性救援 http://jsfiddle.net/pZy8V/4/

#nav li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0 0 0 -1px; /* margin: 0; */ 
    list-style: none; 
    padding: 0; 
} 
#nav li:hover li { 
    float: none; 
}

來源

2012-06-08 07:42:40 Phil

Navbar刪除間距 - CSS或JavaScript？

回答

相關問題