Html CSS 导航边框

Question

我想让导航看起来像这样，活动链接的边框需要显示为蓝色。

现在使用以下代码：

.main-nav {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    background-color: #ffffff;
    padding: 30px 10px;
    margin-bottom: 2px;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #303030;
    text-decoration: none;
}

.main-nav li:active,
.main-nav li:hover {
    background-color: #f7f7f7;
    border-bottom: 2px solid #439ddc;
    border-top: 2px solid #439ddc;
}

我的导航是这样的：

Answer 1

听起来您正在考虑 border-bottom 和 border-top 属性。您正在侦听 :hover 伪类，以检测鼠标是否在 link 上。如果是，我们将添加一个蓝色边框。

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
}

<nav>
  <ul>
    <li><a href="http://www.google.com">Home</a></li>
    <li><a href="http://www.apple.com">Services</a></li>
  </ul>
</nav>

Answer 2

您可以使用 margin-top: -2px 和 margin-bottom: -2px 来解决您的问题： jsfiddle 上的工作示例：https://jsfiddle.net/jqsg0sLa/

.main-nav {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    background-color: #ffffff;
    padding: 30px 10px;
    margin-top:-2px;
    margin-bottom:-2px;
    border-top: 2px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #303030;
    text-decoration: none;
}

.main-nav li:active,
.main-nav li:hover {
    background-color: #f7f7f7;
    border-bottom: 2px solid #439ddc;
    border-top: 2px solid #439ddc;
}

Html CSS 导航边框

Html CSS Navigation border

html

css

navigation

border