当前位置： 文江博客话题详情

当悬停在链接上时，我的导航杆高度会增加 - 每个链接下方的线是否引起了？

发布于 2025-01-27 09:14:00 字数 1911 浏览 2 评论 0原文

我遇到了一个问题，当我悬停在导航栏链接上时，整个导航栏的高度略有增加。

我认为每个链接下的红线正在导致这种情况，但是我不确定为什么 - 有人可以告诉我我做错了什么？

另外，我认为这与红线的高度有关。

这是代码：

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}


.nav{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #ffddb8;
border-style: solid;
border-width: 3px;
margin-top: 18px;
width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
position: relative;
margin-bottom: 18px;
}
.nav li{
    display:inline;
}
.nav a{
display: inline-block;
padding: 10px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-family: Arial;
color: black;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>

  <div id="content">


    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>


  </div>

原文

I am having an issue where, when I hover over the navigation bar links, the entire navigation bar's height increases slightly.

I think the red line under each link is causing this to happen, but I am not sure why - could someone tell me what I have done wrong?

Also, I think it has something to do with the height of the red line.

Here is the code:

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}


.nav{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #ffddb8;
border-style: solid;
border-width: 3px;
margin-top: 18px;
width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
position: relative;
margin-bottom: 18px;
}
.nav li{
    display:inline;
}
.nav a{
display: inline-block;
padding: 10px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-family: Arial;
color: black;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>

  <div id="content">


    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>


  </div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

_畞蕅 2025-02-03 09:14:00

是的，您用于红色下划线的伪元素具有增加父母身高的高度。您可以将后元素更改为位置：absolute;及其父 位置：相对;以防止这一点：

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}


.nav{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffddb8;
  border-style: solid;
  border-width: 3px;
  margin-top: 18px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  position: relative;
  margin-bottom: 18px;
}
.nav li{
    display:inline;
}
.nav a{
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  color: black;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 2 * 20px);
    height: 3px;
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>

  <div id="content">


    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>


  </div>

Yes, the pseudo element you use for the red underline has a height which adds to the parents height. You can change the after element to position: absolute; and its parent to position: relative; to prevent that:

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}


.nav{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffddb8;
  border-style: solid;
  border-width: 3px;
  margin-top: 18px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  position: relative;
  margin-bottom: 18px;
}
.nav li{
    display:inline;
}
.nav a{
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  color: black;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 2 * 20px);
    height: 3px;
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>

  <div id="content">


    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>


  </div>

回复 原文
孤者何惧 2025-02-03 09:14:00

一个简单的解决方案就是将您在悬停的Psuedo元素中添加您的代码，而无需徘徊。具有背景设置为透明。然后，在悬停时，您可以将背景设置为bes red。

查看我的代码片段，希望这就是您要寻找的！

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffddb8;
  border-style: solid;
  border-width: 3px;
  margin-top: 18px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  position: relative;
  margin-bottom: 18px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  color: black;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}

.nav a::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: transparent;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover::after {
  background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>
  <div id="content">
    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </div>
</body>

</html>

A simple solution would be to just add the code you had in the psuedo element with hover, to without hover. Have the background set to be transparent. Then on hover, you can set the background to bet red.

See my code snippet, hopefully that is what you are looking for!

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffddb8;
  border-style: solid;
  border-width: 3px;
  margin-top: 18px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  position: relative;
  margin-bottom: 18px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  color: black;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}

.nav a::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: transparent;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover::after {
  background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>
  <div id="content">
    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </div>
</body>

</html>

回复 原文
~没有更多了~

关于作者

风追烟花雨

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文