悬停标签时列表正在移动

时间:2018-09-25 18:30:20

标签: html css

嘿,我正在尝试使用导航栏创建一个网络。但是,当我将鼠标悬停在一个标签(链接)上时,所有其他标签由于某种原因而移动,而我找不到解决方案,请猜测我还在学习的 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>

感谢任何帮助,谢谢大家!

3 个答案:

答案 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>