如何在使用 "Flex" 作为显示悬停时停止不需要的 link 移动？

Question

我希望链接在悬停时停止有额外的移动。

当我将 'position: absolute' 添加到链接时，这会停止不需要的移动。

但是这样做，链接会跳出正常的 'display:flex' 流程。
因此，我不想添加 'position: absolute'.

使用 'Display: flex;' 悬停时稳定链接的最佳方法是什么？
（仅限 HTML 和 CSS 解决方案）

HTML

<!DOCTYPE html>

<html>

<head>
  <link href="portfolio1.css" type="text/css" rel="stylesheet">
</head>

<body>
<section>
  <h2 class="seperate">Topics</h2>
  <ul>
    <li ><a class="nav" href="#">HTML</a></li>
    <li ><a class="nav" href="#">CSS</a></li>
    <li ><a class="nav" href="#">Javascript</a></li>
  </ul>
</section>
</body>
</html>

CSS

* {
  margin: 10px auto;
}

body {
  color: white;
  font-family: Helvetica;
  text-align: center;
}

h2 {
  font-family: "Times New Roman";
  border: 2px solid pink;
  width:30%;
  margin: 20px auto;
  padding: 10px auto;
}

section {
  background-color: #FF745C;
  border-top: 5px dotted tomato;
  margin: 10px auto;
  height: 100%;
  width: : 100%;
  overflow: scroll;
  /*display: flex;*/
}

section ul{
  width: 100%;
  margin: 0 auto;
  list-style-type: none;
  display: flex;
  padding-left:0;

}

section ul li {
    display: inline-flex;
    margin: 10px auto;

}

a {
  width: 100px;
  height: 20px;
  background-color: #FF9985;
  border-radius: 5px;
  color: white;
}

a:hover {
  border: 1px solid #FF441F;
  border-radius: 10px;
  font-weight: 600;
  transition: border, border-radius, font-weight 150ms ease-in;
}

Answer 1

如果您在悬停时添加默认情况下不存在的边框，这可能会更改元素的尺寸。尝试默认添加不可见边框，以便只有颜色发生变化：

a {
  border: 1px solid transparent;
}

a:hover {
  border-color: #FF441F;
}

Answer 2

我通过编辑 a 标签的样式解决了你的问题。

a {
  width: 100px;
  height: 20px;
  background-color: #FF9985;
  border-radius: 5px;
  color: white;
  border: 1px solid #FF9985;
}

如何在使用 "Flex" 作为显示悬停时停止不需要的 link 移动？

how to stop the unwanted link movement while hovered using "Flex" as display?

html

css

hover

flexbox