CSS邊框底部有缺角

我想有我的菜單UL下一個漫長的邊境線，但在列表項目「下邊框」屬性不能很好地工作：http://jsfiddle.net/BjGvp/CSS邊框底部有缺角

#headermenu-left .menu { 
    border-bottom: 4px solid #004B8D; 
}

的邊界我猜 - 邊界左邊和邊界右邊的屬性不在那裏？

我不能把它放在<ul>元素上，因爲那麼這行太長了。

2013-10-16 Tominator

你所需要的除了解決這個問題之外，「ul」是否被絕對定位？ – matewka

@matewka原因是邊界是的，也許不是最好的方式，但它現在對我有用..是否還有一件事我可以學會更好？ – Tominator

我認爲j08691的答案是最好的。我想發佈類似的，但他是第一個。 – matewka

如果你擺脫了它的寬度，你可以把它放在UL上。刪除你的最後一條規則，並使用此：

#headermenu-left { 
    padding: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    border-bottom: 4px solid #004B8D; 
}

2013-10-16 14:06:56 j08691

雖然我需要寬度（在我的真實代碼中）在旁邊放置另一個菜單（右側），並且更多地位於右側，但這確實起作用。但是，我可以通過使這個「正確：10％」而不是原來的「左：70％;寬度：30％;' – Tominator

的問題，正如你提到的，是缺少的左，右邊框，其中有一個寬度，但無色系，所以這種扭曲底部邊界的出現與錯過缺口的錯覺。要解決這個問題，您可以簡單地爲元素定義border-width: 0，並允許border-bottom屬性覆蓋該設置。

2013-10-16 14:07:00

這是行得通的，但是然後我失去了定義菜單邊界的幻想效果，而且所有東西都只是鏈接。有一點讓人討厭，底部的邊界有其他角落（儘管它也應該是這樣）。 – Tominator

不幸的是，這是邊界如何工作。那些是你的邊界的左邊和邊界的右邊。這裏有一個變通不過，我添加了一個div到列表的底部：

（我也刪除您的寬度：70％;從你的列表）

#bluebar { 
    position:absolute; 
    bottom:0px; 
    width:100%; 
    height:5px; 
    background-color:blue; 
}

2013-10-16 14:15:00

可以在'ul'裏面放一個'div'嗎？ – Tominator

不，這是無效的HTML。 –

不是最好的解決方案:)我寧願有一個div包裹在列表中，然後將#bluebar放在該div中。 –

回答