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

Solution 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: 1px00 currentColor;
}

<ul><li><inputtype="checkbox"id="test"><labelfor="test"> My label 1
  </li><li><inputtype="checkbox"id="test2"><labelfor="test2"> My label 2
  </li><li><inputtype="checkbox"id="test3"><labelfor="test3"> My label 2
  </li></ul>

Solution 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><inputtype="checkbox"id="test"><labelfor="test"> My label 1</label></li><li><inputtype="checkbox"id="test2"><labelfor="test2"> My label 2</label></li><li><inputtype="checkbox"id="test3"><labelfor="test3"> My label 2</label></li></ul>

Hope this helps!

Solution 3:

maybe you will try bootstrap, with it you can say:

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

Or you do it by yourself, and say: html:

<divclass="myClass"><!--CHECKBOXES HERE--></div><divclass="myClass"><!--CHECKBOXES HERE--></div><divclass="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:

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

So you dont have to add the width in every css rule.