如何连接两个链接以类似于选项卡？

Question

我想创建代表两个选项卡的样式 - 当您单击每个选项卡时，它是一个 href link。以下是我的微弱尝试。所以第一个（活动）选项卡是 'Owners' 选项卡，其中选项卡具有白色背景，第二个选项卡具有灰色背景。

我想通过两种方式改变它：

我希望边框黑线延伸到页面的末尾（目前这条线刚好停在宠物标签的末尾）
我希望非活动选项卡（本例中的第二个选项卡）在灰色周围有一个小的白色边框

.active-tab {
  background-color: white;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.inactive-tab {
  background-color: #B8B8B8;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  border-bottom: 1px solid black;
}

<a class="active-tab" href="default.asp" target="_blank">Owners</a><a class="inactive-tab" href="default.asp" target="_blank">Pets</a>

Answer 1

我在您的 a 周围添加了一个包装器 div 以将黑色边框延伸到页面末尾。我还为 .inactive-tab 添加了一个 1px solid white 边框。更新示例：

.tabs {
  display: flex;
  border-bottom: 1px solid black;
}

.tabs a {
  margin-bottom: -1px;
}

.active-tab {
  background-color: white;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: underline;
  display: block;
  border: 1px solid black;
  border-bottom: 1px solid white;
}

.inactive-tab {
  background-color: #B8B8B8;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: underline;
  display: block;
  border: 1px solid white;
  border-bottom: 1px solid black;
}

<div class="tabs">
<a class="active-tab" href="default.asp" target="_blank">Owners</a>
<a class="inactive-tab" href="default.asp" target="_blank">Pets</a>
</div>

Answer 2

我已经根据您要求的更改对您的 fiddle 进行了调整，并解释了进行更改的原因。

https://jsfiddle.net/6whgpqv0/

nav {
  border-bottom: 1px solid black; /* A line all the way to the end */
  display: flex; /* Justify all content to the start of the container */
}

nav a {
  display: inline-block; /* Make the link inline blocks so that it will adhere to the negative margin rule */
  margin-bottom: -1px; /* Offset the bottom of the link by 1px so the bottom border overlaps with the nav border */
}

.active-tab {
  background-color: white;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.inactive-tab {
  background-color: #B8B8B8;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  border-bottom: 1px solid black;
  box-shadow: inset 0 0 0 1px #fff; /* White border around the inactive tab */
}

Answer 3

希望这是你想要的结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .active-tab {
            background-color: white;
            color: black;
            padding: 14px 25px;
            text-align: center;
            text-decoration: underline;
            display: inline-block;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

        .inactive-tab {
            background-color: #B8B8B8;
            color: black;
            padding: 14px 25px;
            text-align: center;
            text-decoration: underline;
            display: inline-block;
            border: 2px solid white;
        }

        .line {
            border-bottom:1px solid black;
        }
    </style>
</head>

<body>
    <a class="active-tab" href="default.asp" target="_blank">Owners</a><a class="inactive-tab" href="default.asp"
        target="_blank">Pets</a>

    <div class="line">

    </div>
</body>

</html>

如果您还需要帮助，请在此处评论，我会尽力帮助您

如何连接两个链接以类似于选项卡？

How can I join two links to resemble tabs?

html

css

navigation

user-interface

tabs