如何在隐藏了复选框的CSS中为复选框的标签添加边距？

Toby 发表于 Dev

128

托比

我有很多这样的HTML复选框：

<input id='1' class="tag-checkbox" type="checkbox"'><label for='1'>Checkbox 1</label>
<input id='2' class="tag-checkbox" type="checkbox"'><label for='2'>Checkbox 2</label>
<input id='3' class="tag-checkbox" type="checkbox"'><label for='3'>Checkbox 3</label>

等等

我也有这个CSS，它可以设置标签样式，隐藏实际的复选框以及链接标签和复选框，以便单击标签将选中该复选框。

    input[type=checkbox].tag-checkbox{
        display: none;
    }
    input[type=checkbox]:checked + label{
        background-color: rgb(0, 48, 85);
        color: white;
    }
    label{
         padding: 5px 7px;

         border-radius: 10px;
         background-color: rgb(191, 203, 213);
         
         cursor: pointer;
     }

由于我有很多，所以我将它们水平显示。但是，当它们落到下一行时，标签的背景色会重叠。无论我在CSS中的哪个位置，都无法为标签设置垂直边距。其他问题也有复选框的解决方案，但我将其隐藏了。

它在JSFiddle中：https ://jsfiddle.net/dkprqu3b

盗窃罗伯克

只需添加display: inline-block到您的标签。这样，它们的行为将更像是块而不是文本行。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。