Html CSS边框底部缺少角点

我希望在菜单下方有一个长边框，但列表项上的“border bottom”属性无法正常工作：

边界在拐角处被-我猜-边界左侧和边界右侧属性不存在打断

---

我不能把它放在

元素上，因为这样行太长了。

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

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

---

正如您所建议的，问题在于缺少左边框和右边框，它们有宽度，但没有颜色，因此这会扭曲底部边框的外观，产生缺少缺口的错觉。要解决此问题，只需为元素定义

边框宽度：0

，并允许

border bottom

属性覆盖该设置

---

.

不幸的是，边界就是这样工作的。这是你左边和右边边界的两端。不过，这里有一个解决办法，我在列表底部添加了一个div：

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

---

除了解决这个问题之外，您是否需要绝对定位

ul

。。还有什么我可以学的更好的吗？我认为j08691的答案是最好的。我想发布类似的一个，但他是第一个。像这样在

ul

中放一个

div

可以吗？不，这是无效的HTML。这不是最好的解决方案：）我宁愿在列表中放一个div，然后改为在该div中放一个#bluebar。这确实有效，但是，我失去了定义菜单边框的奇特效果，一切都只是链接。底部边框的角上有其他的边框，这有点让人恼火（尽管这样做也有道理）。这是可行的，尽管我需要宽度（在我的真实代码中）来在旁边放置另一个菜单（-right），并在右侧放置更多的菜单。然而，我可以通过将原来的

left:70%改为
right:10%
来解决这个问题；宽度：30%
#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border-bottom: 4px solid #004B8D;
}

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