Question

我最近一直在使用很酷的设计。其中一个功能的工作方式是，选中复选框后，其字体将更改为粗体。问题是，在改变字体的重量时，它会移动另一个元素。任何想法如何防止它没有定位标签绝对位置。我创建了一个剪辑，显示了问题。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

使用text-shadow来模仿效果：

＆＃13;

li {
    list-style:none;
    display:inline-block;
    margin-right:20px
}

input[type="checkbox"]:checked + label{
    text-shadow: 1px 0 0 currentColor;
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用一个小的CSS Hack。

就像（这将是字体特定的）：

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

请看下面的代码段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！

Answer 3

也许你会尝试使用bootstrap，你可以说：

<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>

或者你自己做，然后说： HTML：

    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>
    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>
    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>

的CSS：

.myClass {
width:33.33333%;
}

希望我能帮到你：）

修改的

你也可以给几个类：

<div class="myClass1 myClass2 myClass3">
</div>

所以你不必在每个css规则中添加宽度。

防止在更改其字体粗细时移动文本

3 个答案: