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

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

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

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

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

此处为jsfiddle

Answer 3

你可以这样做：

HTML

<form class="form">
    <ul>
        <li>
          <input id="inputField">
          <label for="inputField">Field 1</label>
        </li>
        <li class="checkbox">
            <input type="checkbox" id="input2">
            <label for="input2">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>
        </li>
        <li class="checkbox">
            <input type="checkbox" id="input3">
            <label for="input3">Field 3 Normal long</label>
        <li>
    </ul>
</form>

CSS

.form {
  width: 300px;
}

.form ul {
  list-style:none;
  padding: 0;
}

.form ul li {
  overflow:hidden;
}

.form ul li.checkbox input {
  float:left;
}

.form ul li.checkbox label {
  float:right; 
  width:270px;
}

您也可以使用div代替ul。

Answer 4

类似这样的东西。

.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>