html - 右边框切入底边框

Question

如何修复灰色边框线，使其正好落在绿色高光的底部而不是中途切断？

我在下面提供了我的代码 codepen .

在此先感谢您的帮助:)

html

<div id="status_bar">
                <div class="admin_status_box">
                    <ul>
                        <a href="admin.php" class="active">View & Delete posts </a>
                        <a href="admin-delete-members.php">View & Delete members </a>

                    </ul>

                </div>
            </div>

CSS

#status_bar {
    width: 700px;
    height: 60px;
    background: #efefef;
    float: left;
}

.admin_status_box {
    background: #efefef;    
    height: 60px;
    border-right: 1px solid #d6d6d6;

}

.admin_status_box ul {
    margin: 0px;
    padding: 0;
}

.admin_status_box li {
    text-decoration: none;

}

.admin_status_box a {
    text-decoration: none;

    padding: 0 30px 0 30px;
    text-align: center;
    height: 60px;

    float: left;
    line-height: 60px;
    border-right: 1px solid #d6d6d6;


}

.admin_status_box a.active {

border-bottom: 10px solid #619e4c;
}

.admin_status_box a:hover {
    background: #fff;

}

Answer 1

首先，通过实际使用 <li>，您的 HTML 应该是有效的标签。接下来，您需要知道边界以一定 Angular 相交并且 Angular 是插值的。一个很好的例子是

div.test { 
  height: 200px;
  width: 300px;
  border-radius: 40px;
  border-width: 20px 0 5px 0;
  border-color: #000;
  border-style: solid;
 }

因此，为了解决您的问题，您需要将边框分配给不同的元素。如果您插入 <li>标签你有两个元素可以使用。请参阅 demo 用于以下代码。

.admin_status_box li {
  border-right: 1px solid #d6d6d6;
}

.admin_status_box a.active {
  border-bottom: 10px solid #619e4c;
}