防止在更改字体时移动文本重量
最近我一直在使用酷酷的设计。其中一个功能的工作方式是,虽然选中了复选框,但其字体将变为粗体。问题是,在改变字体的重量的同时,它会移动另一个元素。任何想法如何防止它没有定位与绝对位置标签。我创建了一个显示问题的剪辑。防止在更改字体时移动文本重量
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>
使用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>
好主意 - 我喜欢! – 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>
希望这有助于!
当您希望为用户提供尽可能最好的体验时,可能是最好的解决方案,但在更改字体,尺寸等时很难维护。 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规则。
可能是helllful - [内联元素转移时,悬停大胆](https://*.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover),这个想法是为粗体(或任何:悬停状态样式)内容保留空格:在伪元素之后并使用标题标记作为内容源。 – Ankit
设置你渲染文字的元素的宽度。 –