css 更改字体粗细时避免布局偏移

yeotifhr 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(161)

我有一个POC，只有当某个单词被悬停时才会导致布局偏移，但我不知道为什么/到底是什么导致了偏移。
如果我悬停Three文本，布局将移动;而悬停任何其他元素不会导致移动。
我知道这与div的display: flex有关，但我不知道为什么它会导致偏移。

div {
  display: flex;
}

nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font: 120% system-ui;
  text-align: center;
  padding: 2rem 1rem;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  font-weight: 900;
}

个字符
为什么会发生这种情况，我如何避免它，而不从div中删除display: flex？

css

来源：https://stackoverflow.com/questions/77774008/avoid-layout-shift-when-changing-font-weight

1条答案

按热度按时间

wfauudbj1#

粗体文本比普通文本宽，因此如果您的布局与某些文本的宽度相关联，则将其从普通文本交换为粗体可能会导致布局偏移。

方案一

将布局与文本宽度分离。使列宽于锚点。

nav {
  display: grid;
  grid-template-columns: repeat(4, 3em);
  gap: 1rem;
  font: 120% system-ui;
  text-align: center;
  padding: 2rem 1rem;
}

nav a {
  text-decoration: none;
  color: black;
  transition: 200ms;
}

nav a:hover {
  font-weight: 900;
}

个字符

方案二

悬停时不要改变字体粗细，改点别的。

nav {
  display: flex;
  gap: 1rem;
  font: 120% system-ui;
  text-align: center;
  padding: 2rem 1rem;
}

nav a {
  text-decoration: none;
  color: black;
  transition: 200ms;
}

nav a:hover {
  text-decoration: underline;
  color: #d70000;
}

<nav>
  <a href="">One</a>
  <a href="">Two</a>
  <a href="">Three</a>
  <a href="">Four</a>
</nav>

的字符串

赞(0）回复(0）举报 2024-01-09

我来回答

css 更改字体粗细时避免布局偏移

1条答案

相关问题

热门标签

最新问答