防止在更改字体时移动文本重量

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

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>

El Danielo

可能是helllful - [内联元素转移时，悬停大胆]（https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover），这个想法是为粗体（或任何：悬停状态样式）内容保留空格：在伪元素之后并使用标题标记作为内容源。 –

设置你渲染文字的元素的宽度。 –

回答

使用text-shadow模仿的效果：

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>

Roberrrt

好主意 - 我喜欢！ –

防止在更改字体时移动文本重量