当我将鼠标光标放在其中一个元素（例如“主页”或“联系人”）上时，无序列表的元素向右移动约 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 {&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; background-attachment: fixed;&nbsp; background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);}header {&nbsp; margin: 0px;&nbsp; padding: 0px;}.hhh {&nbsp; position: absolute;&nbsp; font-family: 'Fredoka One', cursive;&nbsp; font-size: 40px;&nbsp; left: 8%;&nbsp; top: 4%;}.hhh a {&nbsp; text-decoration: none;}.hhh a:active {&nbsp; color: black;}.hhh a:visited {&nbsp; color: black;}.hhh a:hover {&nbsp; color: black;&nbsp; opacity: 0.8;&nbsp; font-size: 110%;}.hhh a:link {&nbsp; color: black;}.gm {&nbsp; position: absolute;&nbsp; display: flex;&nbsp; left: 55%;&nbsp; top: 7%;&nbsp; font-family: 'Fredoka One', cursive;&nbsp; font-size: 20px;}.gm li {&nbsp; margin-left: 35px;&nbsp; list-style-type: none;}.gm li a {&nbsp; display: block;&nbsp; text-decoration: none;}.gm li a:active {&nbsp; color: black;}.gm li a:hover{&nbsp;&nbsp;&nbsp; transform: scale(1.1);}<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet"><header>&nbsp; <nav>&nbsp; &nbsp; <h1 class="hhh"><a href="#"> THIS IS MY WEBPAGE </a></h1>&nbsp; &nbsp; <ul class="gm">&nbsp; &nbsp; &nbsp; <li><a href="#">Home</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Photos</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Games</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">News</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Contact</a></li>&nbsp; &nbsp; </ul>&nbsp; </nav></header><main></main><footer></footer>