HTML：複数行ラベルの左側に配置されたチェックボックス入力

Question

ラベルの位置とラベルの入力を切り替える方法を探しています。これにより、チェックボックスがラベルの左側にレンダリングされます。ラベルテキストの単一ライン用

<label>Question text</label> 
<div class="input-checkbox"> 
    <input type="checkbox"/> 
</div> 

が、これは正常に動作します：

.input-checkbox {display:inline; float:left; margin:2px 4px 4px 0;} 

をしかし、あなたはそれがトップの上にラップを複数行で見ることができるように：私はスタイルはどうすればよい

をそれがマルチラインの状況で右にとどまるようにラベルを貼りますか？私はHTMLの構造を変更したくありません。私はそれが働いた

Answer 1

一つの方法は、display:inline-block;に.input-checkboxとlabelの両方を設定し、labelだけで、以下の例にmax-widthを設定することでした。

.input-checkbox {display:inline-block; float: left; margin:2px 4px 4px 0;} 
 
    .label-question {display: inline-block; max-width:90%;}

<label class="label-question">Mentitum et tamen incididunt, minim arbitror eruditionem ab expetendis et elit 
 
    laboris iis magna consectetur iudicem tamen tempor aut a nisi a illum iis 
 
    pariatur a dolor nostrud, noster incididunt domesticarum et ita ipsum multos 
 
    aute laborum. Se ingeniis est arbitror. Pariatur quis an incurreret adipisicing 
 
    ad elit possumus sed aute quae hic e incurreret ad pariatur, fore nescius sed 
 
    possumus, ita veniam possumus id de sunt pariatur ea eram mentitum cernantur, o 
 
    ita transferrem. Velit occaecat do enim nulla, sed qui transferrem. Hic o dolore 
 
    amet duis. Ipsum non de quem nostrud. Offendit graviterque ab quibusdam, quis 
 
    proident non philosophari.</label> 
 
<div class="input-checkbox"> 
 
    <input type="checkbox"/> 
 
</div>

Answer 2

<style> 
    label {position:absolute; padding-left:30px} 
</style> 

私にこれを与える：

は精巧させていただき...