如何在 CSS 中使用自定义图标自定义的复选框的标签上添加悬挂缩进？

Question

我正在尝试使用 font-awesome 自定义复选框的外观，并正确缩进标签的所有文本。我已经自定义了复选框的外观，这使得缩进文本的常用方法不起作用，因为我隐藏了实际的复选框（请参阅下面的 CSS）。

目前我得到的是下面的（左），而我想要的是右边的：

我使用了以下代码（参见 JSFiddle）：

CSS

受此 simple CSS checkboxes 的启发，我使用以下代码将我的复选框设置为 font-awesome：

input[type=checkbox] { 
    display:none;
} 

input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 10px;
    cursor: pointer;
}

input[type=checkbox]:checked + label:before { 
    content: "\f046";
} 

input[type=checkbox]:checked + label:before { 
    letter-spacing: 8px;
}

HTML

<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>

我尝试修改 label 和 label:before 选择器的 margin-left 和 text-indent 属性，但没有成功。

知道如何在使用漂亮的字体图标时获得正确的缩进吗？

非常感谢您的帮助！

Answer 1

添加此样式（已在 Chrome 和 Firefox 上测试）

label {
    display: block;
    padding-left: 1.5em;
    text-indent: -.7em;
}

http://jsfiddle.net/tkt4zsmc/2/

最终结果：

Answer 2

根据 Fabrizio Calderan 的回答，我对 CSS 进行了以下修改：

label{
    display: inline-block;
    margin-left: 20px;
}

label:before{
    margin-left: -23px;
}

优点是不修改item之间的间距。您可以在 JSFiddle.

中查看最终结果

Answer 3

现在尝试 's suggestion and not being able to get the values for padding-left and text-indent right for different browsers, I switched to a flex box. It is pretty green 之后。

如果按照 Mozilla 的建议将 input/label 对放在 div 中，您可以这样设计它们。

fieldset {
  width: 13ch;
}

fieldset > div {
  display: flex;
}

fieldset > div > * {
  align-self: baseline;
}

fieldset > div > input[type=checkbox] {
  margin: 0 0.5ch 0 0;
  width: 1em;
  height: 1em;
}

<fieldset>
  <legend>Sichtbarkeit</legend>
  <div>
    <input id="c1" checked="" type="checkbox">
    <label for="c1">Minuten</label>
  </div>
  <div>
    <input id="c2" checked="" type="checkbox">
    <label for="c2">Nur Minuten, die Vielfache von 5 sind</label>
  </div>
  <div>
    <input id="c3" checked="" type="checkbox">
    <label for="c3">Stunden</label>
  </div>
  <div>
    <input id="c4" checked="" type="checkbox">
    <label for="c4">Nur 12 Stunden</label>
  </div>
</fieldset>

如何在 CSS 中使用自定义图标自定义的复选框的标签上添加悬挂缩进？

How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

html

css

checkbox

font-awesome

text-indent