html - CSS3 样式的复选框 - 尝试缩进/左对齐复选框右侧的标签文本

Question

我有使用 fontAwesome 的 CSS3 样式复选框。我遇到的一个小格式问题是文本换行位于复选框下方。这是代码和 fiddle :

CSS:

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

.wrapper {
  width:300px;
}
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f1db";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}
input[type=checkbox].with-font:checked ~ label:before  {
    content: "\f00c";
    font-size: 1.2em;
    color: darkgreen;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {        
    content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f046";        
    color: darkgreen;
}

HTML:

<div class="wrapper">
    <input id="box1" type="checkbox" class="with-font" />
    <label for="box1">This is very long text that will wrap underneath the checkbox. Not sure how to flush it properly.</label>
</div>

JS Fiddle

理想情况下，我想缩进并调整文本，如下所示:

我已经尝试了一些方法，例如在表格中包装和左浮动 div，但是当我尝试将标签与复选框分开时，它似乎破坏了 CSS。非常感谢任何方向!

Answer 1

像那样？ ;)

HTML:

<div class="wrapper">
  <input id="box1" type="checkbox" class="with-font" />
  <label for="box1">
    <span class=text>
      This is very long text that will wrap underneath the checkbox.     Not sure how to flush it properly.
    </span>
  </label>
</div>

CSS:

    @import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);
    .wrapper {
      width: 300px;
      text-align: justify;
      text-justify: inter-word;
    }

    input[type=checkbox].with-font {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    input[type=checkbox].with-font ~ label:before {
      font-family: FontAwesome;
      display: inline-block;
      content: "\f1db";
      letter-spacing: 10px;
      font-size: 1.2em;
      color: #535353;
      width: 1.4em;
    }

    input[type=checkbox].with-font:checked ~ label:before {
      content: "\f00c";
      font-size: 1.2em;
      color: darkgreen;
      letter-spacing: 5px;
    }

    input[type=checkbox].with-font ~ label:before {
      content: "\f096";
    }

    input[type=checkbox].with-font:checked ~ label:before {
      content: "\f046";
      color: darkgreen;
    }

    .text {
      margin-left: 10px;
      position: absolute;
      width: 250px;
    }

https://jsfiddle.net/0vpcwo53/

变更日志:

• 在 html 中 This is very ...现在被 <span class=text></span> 包围
• 在 .wrapper 中更改 CSS
• 在css中添加.text

仅此而已。