Question

我遇到一个问题，即页面上的内容向下或向右移动。当使用li：hover添加border-bottom或font-weight：700时会发生这种情况;到我的导航链接。

我正在尝试在用户将鼠标悬停在导航链接上时为导航链接添加一些样式。但是，当应用样式时，页面上的内容会被移动/移动。

为什么会发生这种情况？如何阻止它？

/* GLOBAL */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Raleway", "Hevletica", sans-serif;
  color: #000;
  background-color: #DCDCDC;
  box-sizing: content-box;
}

header, .container, footer{
  margin: 0 auto;
  width: 80%;
}

div.banner img {
  max-height: 250px;
  width: 100%;
  border-radius: 3.5px;
}

/* NAV BAR */
.list-reset a {
  text-decoration: none;
  list-style: none;
  color: #000;
}

nav.main-nav ul {
  margin: 20px auto;
  text-align: center;
}

nav.main-nav li {
   display: inline-block;
   padding: 0 50px;
   font-size: 20px;
   text-transform: uppercase;
}

li a:hover {
  /*border-bottom: 3px solid #FF0000;*/
  font-family: "Raleway";
  font-weight: 700;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate">
    <meta http-equiv="Content-Language" content="en">

    <title>Practice</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
  </head>
  <header>
    <nav class="main-nav">
      <ul class="list-reset">
        <li><a href="#">Services</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
  <body>
    <div class="container">
      <div class="banner">
        <img src="images/banner.jpg" alt="banner">
      </div>

      <div class="main">
        <h1>Lorem!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div class="newsletter">
        <h1>Newsletter</h1>
        <form class="newsletter-form">
          <label for="email"></label>
          <input class="email" type="email" name="email" placeholder="Enter your email">
          <input class="submit" type="submit" name="submit" value="Submit">
      </form>
    </div>
    </div> <!-- CONTAINER END -->
  </body>
  <footer>
    <p>Copyright &copy; fname sname 2017</p>
  </footer>
</html>

使用li时内容移动/移动：悬停在导航栏链接上

0 个答案: