防止在更改字体粗细时移动文本 [英] Prevent to move text while changing its font-weight

问题描述

我最近一直在研究很酷的设计.其中一个功能在选中复选框时，其字体更改为粗体.问题是，在改变字体的粗细时，它会稍微移动另一个元素.任何想法如何在不定位的情况下防止它使用绝对位置标记它.我创建了一个显示问题的片段.

I've been working with cool designs lately. One of the features works in the way that while checkbox is selected, then its font changes to bold. The problem is that while changing the weight of the font it moves another elements a little bit. Any ideas how to prevent it without positioning labels it with absolute position. I've created a snipped which shows the problem.

li{
  list-style:none;
  display:inline-block;
  margin-right:20px
}

input[type="checkbox"]:checked + label{
font-weight:bold;
}

<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2
  </li>
</ul>

推荐答案

您可以为此使用一个小的 CSS Hack.

You can use a small CSS Hack for this.

就像(这将是特定于字体的):

input[type="checkbox"]:checked + label{
  font-weight: bold;
  display: inline-block;
  margin-right: -2.8px; /* cancel the margin on right that is produced */
}

看看下面的片段:

li{
  list-style:none;
  display:inline-block;
  margin-right:20px
}

input[type="checkbox"]:checked + label{
  font-weight: bold;
  display: inline-block;
  margin-right: -2.8px;
}

<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1</label>
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2</label>
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2</label>
  </li>
</ul>

希望这会有所帮助！

这篇关于防止在更改字体粗细时移动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！