Prevent to move text while changing its font-weight [duplicate] - html

Question

This question already has answers here:
CSS: bolding some text without changing its container's size
(14 answers)
Inline elements shifting when made bold on hover
(30 answers)
Closed 6 years ago.
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>

Answer 1

Use text-shadow to mimic the effect:
li {
list-style:none;
display:inline-block;
margin-right:20px
}
input[type="checkbox"]:checked + label{
text-shadow: 1px 0 0 currentColor;
}
<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>

Answer 2

You can use a small CSS Hack for this.
Just like (this will be font specific):
input[type="checkbox"]:checked + label{
font-weight: bold;
display: inline-block;
margin-right: -2.8px; /* cancel the margin on right that is produced */
}
Have a look at the snippet below:
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>
Hope this helps!

Answer 3

maybe you will try bootstrap, with it you can say:
<div class="col-md-4">
<!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
<!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
<!--CHECKBOX HERE-->
</div>
Or you do it by yourself, and say:
html:
<div class="myClass">
<!--CHECKBOXES HERE-->
</div>
<div class="myClass">
<!--CHECKBOXES HERE-->
</div>
<div class="myClass">
<!--CHECKBOXES HERE-->
</div>
css:
.myClass {
width:33.33333%;
}
hope i was able to help you :)
EDIT
You can also give a div several classes:
<div class="myClass1 myClass2 myClass3">
</div>
So you dont have to add the width in every css rule.