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

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

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>

来源

2016-11-29 El Danielo

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

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

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

来源

2016-11-29 14:35:26 Roberrrt

好主意 - 我喜欢！ – connexo

您可以使用一个小的CSS破解这一点。

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

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>

希望这有助于！

来源

2016-11-29 14:43:23

当您希望为用户提供尽可能最好的体验时，可能是最好的解决方案，但在更改字体，尺寸等时很难维护。 upvoted虽然。 – Roberrrt

也许你会尝试引导，有了它，你可以说：

<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几类：

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

所以你不要有增加的宽度在每一个CSS规则。

来源

2016-11-29 14:58:31 cais

这对于这样一个小问题有点矫枉过正。 – Roberrrt

是的，你是对的 - 但是当你习惯了这个程序时，你会发现更容易 – cais

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

回答

相关问题