嘿,我正在尝试使用导航栏创建一个网络。但是,当我将鼠标悬停在一个标签(链接)上时,所有其他标签由于某种原因而移动,而我找不到解决方案,请猜测我还在学习的 css 玩法。...任何帮助怎么了?
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
感谢任何帮助,谢谢大家!
答案 0 :(得分:0)
我找到了解决方法:
letter-spacing: 1.5px;
我忘记了标签中的这一行
答案 1 :(得分:0)
您正在为header a:hover
添加间距。这意味着每当您将鼠标悬停在链接上时,就会添加字母间距。
答案 2 :(得分:0)
您应该在letter-spacing: 1.5px;
类中添加header a
而不是将其悬停,这就是为什么当您悬停li
时它会移动的原因。
如果您真的想在悬停上显示一点动静,可以尝试以下方法。
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
letter-spacing: 1.5px;
position: relative;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
right: 2px;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>