CSS边框底部缺角

Question

我想在我的菜单UL下面有一个长边框，但列表项上的“border-bottom”属性效果不佳：http://jsfiddle.net/BjGvp/

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

边框在角落处被中断 - 我猜 - 边框左边和边框右边的属性不存在？

我不能把它放在<ul>元素上，因为那条线运行的时间太长了。

Answer 1

如果你摆脱它的宽度，你可以把它放在UL上。删除最后一条规则并使用：

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

<强> jsFiddle example

Answer 2

问题，如你所说，是缺少左右边框，它有宽度但没有颜色，所以这会使底部边框的外观扭曲，并带有缺失缺口的错觉。要解决此问题，您只需为元素定义border-width: 0，并允许border-bottom属性覆盖该设置。

Demo

Answer 3

不幸的是，这是边界的工作方式。这些是你的边界左边和边界右边的结尾。这是一个解决方法，我在列表的底部添加了一个div：

（我也删除了您的宽度：70％;从您的列表中删除）

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

http://jsfiddle.net/BjGvp/6/