Question

如何修复灰色边框线，使其直接到达绿色高光的底部而不是中途切断？

我在codepen提供了以下代码。

提前感谢您的帮助：）

A picture of what it looks like

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

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

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;
}

Answer 2

您需要li个元素才能成为ul元素的第一个子元素。如果您将每个a元素放在li元素中，则可以在li元素上设置边框，并且边框具有所需的结果。完成此操作后，请确保从.admin_status_box

中删除1px边框

可能需要一些CSS来准确定位它们的位置。

<强> See this edited codepen

编辑错字

Answer 3

您必须添加一个单独的div作为条形图。你无法告诉边框缩短，因为这是它设置的行为。最好的办法是使用你注释掉的div作为green_box。

Answer 4

我刚刚更正了html，显示了li inline-block并将边框底部添加到li而不是链接。 http://codepen.io/anon/pen/hvcBI

右边界切入底部边界

4 个答案: