如何用另一个元素删除部分边框？

Question

您好我试图制作导航菜单，当您在活动链接上时，我希望底部边框位于标题设置的边框顶部。 有谁知道如何做到这一点？这是一个例子。 http://i.imgur.com/o6B8M3I.png

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: red;
    border-bottom: 2px solid white;
}

#nav {
    padding: 5px;
    border: 0.3em solid red;
    border-bottom: 0
}

#nav a {
    color: #fff;
    display: block;
    padding: 0.5em;
}

#nav a.active {
    background-color: #203748;
    color: #fff;
    text-decoration: none;
    border: 2px solid #ddd;
    border-bottom: 2px solid #686868;
}

jsfiddle在这里。 http://jsfiddle.net/pc2W5/

Answer 1

从Bootstrap的标签中获取提示，使用底部下边距将活动标签放在标题边框上：

http://jsfiddle.net/isherwood/pc2W5/1

#nav a.active {
    margin-bottom: -2px;
}

为了使文本在所有标签之间保持正确对齐，还要调整填充：

http://jsfiddle.net/isherwood/pc2W5/2

#nav a.active {
    padding-bottom: 10px;
}