Html 悬停时使标签加粗会使容器移动

当我将单选按钮的标签悬停时，我希望它们是粗体的。但是，这会导致容器更改其宽度。当标签为粗体时，有没有一种方法可以保持相同的容器宽度，这在所有主要的最新版本浏览器中都适用

以下是我的html代码：

<form>
  <div>
    <b class="group-label">from</b>
    <span class="input-wrapper">
      <input type="radio" id="from-hiragana" name="from" value="true">
      <label for="from-hiragana">
        <span>Hiragana</span>
      </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-katakana" name="from" value="true">
      <label for="from-katakana">
        <span>Katakana</span>
      </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-romaji" name="from" value="true">
      <label for="from-romaji">
        <span>Romaji</span>
      </label>
    </span>
  </div>
</form>

---

使用文字阴影使文字看起来粗体。看

---

您只需将标签的位置更改为“固定”，并将边距扩展到包装上即可

.input-wrapper {
  margin-right: 100px;
}

.input-wrapper label {
  position: fixed;
  cursor: pointer;
}

---

您可以使用

text shadow

获得它，如下所示

您可以通过

max width

和

flex

获得以下内容

CSS更改

.input-wrapper label:hover {
  /* font-weight: bold; */
  text-shadow:1px 0px 0px #000;
  transition: all 0.3s linear;
}

。输入包装器{
右边距：30px；
}
.输入包装标签{
位置：相对位置；
光标：指针；
}
.输入包装标签：悬停{
/*字体大小：粗体*/
文本阴影：1px 0px 0px#000；
过渡：所有0.3s线性；
}
.输入包装器span:：before，
.input包装器span:：after{
内容：''；
位置：绝对位置；
排名：0；
底部：0；
保证金：自动；
}
.input包装器span:：hover{
光标：指针；
}
.input包装器span:：before{
左：-20px；
宽度：17px；
高度：17px；
背景色：白色；
边界半径：50px；
}
输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]：选中+标签span:：之后{
左：-17px；
宽度：11px；
高度：11px；
边界半径：10px；
背景色：#98fbc9；
过渡：左.25s，背景色.25s；
}
.组标签{
右边距：30px；
文本转换：大写；
}

从…起
平假名
片假名
罗马书

跨浏览器是一个非常宽泛的说法，因此值得注意的是，这将在IE 9及更旧版本上失败。我更新了我的问题。重要的是，它适用于所有主要的最新浏览器。您接受了我的答案，现在您将其删除了任何关于sameYes的问题，似乎每个输入包装器之间的间距将始终随此解决方案而变化。好的，如果您不需要空格，您可以使用reduse

max width

，是的，但我需要输入包装之间保持一致的间距^^^我更新了答案您可以使用

text shadow

I发布了工作小提琴。

.input-wrapper {
  margin-right: 100px;
}

.input-wrapper label {
  position: fixed;
  cursor: pointer;
}

.input-wrapper label:hover {
  /* font-weight: bold; */
  text-shadow:1px 0px 0px #000;
  transition: all 0.3s linear;
}