Question

我使用fontAwesome设置了CSS3样式的复选框。我遇到的一个小格式问题是文本换行位于复选框下面。这是代码和小提琴：

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

这就是全部。

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

1 个答案: