如何在删除 div 的边框时在我的导航栏上添加 link 的边框 header？

Question

目前它是这样的：我想删除 'active' class 元素（即图中的主页）下的灰色边框，同时用更粗的橙色 bottom-border 替换它。我该怎么做？

* {
    font-family: 'Asap', sans-serif;
    margin: 0;
}

div.header {
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 100%;
    border-bottom: solid rgba(0, 0, 0, 0.1) 2px;
}

div.header a.text {
    text-decoration: none;
    color: gray;
    padding: 20px;
    text-transform: capitalize;
    float: left;
    transition: 0.1s;
}

div.header a.text:hover {
    color: rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.1);
}

div.header a.text.active {
    color: #ff5e00;
    border-bottom: solid #ff5e00;

<!DOCTYPE>
<html>
    <head>
        <title>Ant Arni's Crappy Site!</title>
        <link href="css/main.css" type="text/css" rel=stylesheet>
        <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
    </head>
    <body>
        <div class=header>
            <a href=# class="text active">Home</a>
            <a href=# class=text>Members</a>
            <a href=# class=text>Handbook</a>
            <a href=# class=text>Apply</a>
            <a href=# class=text>Staff</a>
        </div>
    </body>
</html>

Answer 1

您可以使用 after 并从 .active 中删除边框底部 class

div.header a.text.active {
    position: relative;
}

div.header a.text.active::after {
    position: absolute;
    bottom: -2px;
    content: '';
    left: 0;
    right: 0;
    height: 3px;
    background-color: #ff5e00;
    z-index: 2;
}

Answer 2

这是最简单的方法。添加到活动 link:

margin: 0 0 -2px;

* {
    font-family: 'Asap', sans-serif;
    margin: 0;
}

div.header {
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 100%;
    border-bottom: solid rgba(0, 0, 0, 0.1) 2px;
}

div.header a.text {
    text-decoration: none;
    color: gray;
    padding: 20px;
    text-transform: capitalize;
    float: left;
    transition: 0.1s;
}

div.header a.text:hover {
    color: rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.1);
}

div.header a.text.active {
    color: #ff5e00;
    border-bottom: solid #ff5e00;
    margin: 0 0 -2px;
}

<!DOCTYPE>
<html>
    <head>
        <title>Ant Arni's Crappy Site!</title>
        <link href="css/main.css" type="text/css" rel=stylesheet>
        <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
    </head>
    <body>
        <div class=header>
            <a href=# class="text active">Home</a>
            <a href=# class=text>Members</a>
            <a href=# class=text>Handbook</a>
            <a href=# class=text>Apply</a>
            <a href=# class=text>Staff</a>
        </div>
    </body>
</html>

Answer 3

如果你想要服装位置，请使用 :psuedo 元素 :after 而不是直接。

这里是片段：

div.header {
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 100%;
    border-bottom: solid rgba(0, 0, 0, 0.1) 2px;
}

div.header a.text {
    text-decoration: none;
    position:relative;
    color: gray;
    padding: 20px;
    text-transform: capitalize;
    float: left;
    transition: 0.1s;
}

div.header a.text:hover {
    color: rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.1);
}

div.header a.text.active {
    color: #ff5e00;
 }
 
 div.header a.text.active:after{
       content: " ";
    position: absolute;
    width: 100%;
    height: 2px;
    border-bottom: solid #ff5e00;
    bottom: -2px;
    left: 0;
 }

<div class=header>
            <a href=# class="text active">Home</a>
            <a href=# class=text>Members</a>
            <a href=# class=text>Handbook</a>
            <a href=# class=text>Apply</a>
            <a href=# class=text>Staff</a>
        </div>

如何在删除 div 的边框时在我的导航栏上添加 link 的边框 header？

How do I add a border header of a link on my navigation bar while removing the div's border?

html

css

header

border

navbar