html - CSS边框底部缺少角

Question

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

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

边界在拐角处被-我猜-border-left 和border-right 属性不存在打断了？

我不能把它放在<ul>元素上，因为那样行太长了。

score 5 · Accepted Answer

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

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

score 2 · Accepted Answer

正如您所建议的，问题是缺少左右边框，它们有宽度，但没有颜色，因此这会扭曲底部边框的外观，并产生缺少缺口的错觉。要解决这个问题，您可以简单地border-width: 0为元素定义，并允许border-bottom属性覆盖该设置。

score 0 · Accepted Answer

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

（我还删除了你的宽度：70%；从你的列表中）

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

3 回答 3