当我将鼠标光标放在其中一个元素（例如“主页”或“联系人”）上时，无序列表的元素向右移动约 5 个像素

Question

因此，当我将鼠标光标放在无序列表的一个元素上时，我遇到了这个问题，该元素右侧的所有其他元素向右移动了大约 5 个像素。我是 HTML 和 CSS 新手，所以我遇到了这个障碍......有办法解决这个问题吗？另外，我加上“ ul li a:hover ” ，字体增大了110%，而在其他情况下，例如，当我在“ ul li a:hover ”上只加上“ opacity ”时，上述情况都不会发生，元素不会移动到右侧。这是我的 HTML：body {  margin: 0px;  padding: 0px;  background-attachment: fixed;  background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);}header {  margin: 0px;  padding: 0px;}.hhh {  position: absolute;  font-family: 'Fredoka One', cursive;  font-size: 40px;  left: 8%;  top: 4%;}.hhh a {  text-decoration: none;}.hhh a:active {  color: black;}.hhh a:visited {  color: black;}.hhh a:hover {  color: black;  opacity: 0.8;  font-size: 110%;}.hhh a:link {  color: black;}.gm {  position: absolute;  display: flex;  left: 55%;  top: 7%;  font-family: 'Fredoka One', cursive;  font-size: 20px;}.gm li {  margin-left: 35px;  list-style-type: none;}.gm li a {  text-decoration: none;}.gm li a:active {  color: black;}.gm li a:visited {  color: black;}.gm li a:hover {  color: black;  font-size: 110%;  box-sizing: border-box;}.gm li a:link {  color: black;}预先感谢所有答案！（PS 抱歉，如果 CSS 不是 100% 没问题，我才刚刚开始，哈哈...）

Answer 1

您可以设置display: block;并.gm li a使用transform:scale：

body {

  margin: 0px;

  padding: 0px;

  background-attachment: fixed;

  background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);

}

header {

  margin: 0px;

  padding: 0px;

}

.hhh {

  position: absolute;

  font-family: 'Fredoka One', cursive;

  font-size: 40px;

  left: 8%;

  top: 4%;

}

.hhh a {

  text-decoration: none;

}

.hhh a:active {

  color: black;

}

.hhh a:visited {

  color: black;

}

.hhh a:hover {

  color: black;

  opacity: 0.8;

  font-size: 110%;

}

.hhh a:link {

  color: black;

}

.gm {

  position: absolute;

  display: flex;

  left: 55%;

  top: 7%;

  font-family: 'Fredoka One', cursive;

  font-size: 20px;

}

.gm li {

  margin-left: 35px;

  list-style-type: none;

}

.gm li a {

  display: block;

  text-decoration: none;

}

.gm li a:active {

  color: black;

}

.gm li a:hover{  

  transform: scale(1.1);

}

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<header>

  <nav>

    <h1 class="hhh"><a href="#"> THIS IS MY WEBPAGE </a></h1>

    <ul class="gm">

      <li><a href="#">Home</a></li>

      <li><a href="#">Photos</a></li>

      <li><a href="#">Games</a></li>

      <li><a href="#">News</a></li>

      <li><a href="#">Contact</a></li>

    </ul>

  </nav>

</header>

<main>

</main>

<footer>

</footer>