html - ラベル テキストは折り返されますが、2 行目はインデントされません

Question

幅が制限されたフォームがありますが、ラベル テキストがフォーム幅より長い可能性があるため、テキストが複数行に折り返されました。私の問題は、入力要素のために最初の行がインデントされているが、2行目はインデントされていないため、フォームがうまくいかないことです。

2番目、3番目...を最初の行としてインデントし、CSSのみを使用するという考えはありますか?

実際：

私の期待は

これは私のケースの例です：

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

Answer 1

次のようなことができます。

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。