标签文本被包装但不缩进第二行

Question

我有一个宽度有限的表单,但标签文本可能比表单宽度长,因此文本被包装为多行.我的问题是第一行是由于输入元素缩进而第二行不是,它使表单不好.

你有什么想法让第二,第三......将缩进为第一行,只使用CSS？

实际:

我的期望是

这是我案例的例子:

http://jsbin.com/UvaqISO/2/edit

Answer 1

css像这样编辑：

.form {
  width: 300px;
}
label {
  display: block;
  margin-top: -20px;
  margin-left: 20px;
}

Answer 2

像这样的东西。

.checkbox-field {
    display: flex;
    flex-direction: row;
}

<div class="checkbox-field">
    <input type="checkbox" id="check">
    <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div>

Answer 3

text-indent只在第一行生效，如果你想缩进所有行，你应该使用padding并使用复选框输入float：：

     .form {
    width: 300px;
  }
#input2{
    float:left;

}
#input2 + label
{
  padding-left: 30px;
display: block;
}

这里有一个jsfiddle