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

我发现有效的方法是将.input-checkbox和label都设置为display:inline-block;，然后将max-width设置为label Just和以下示例。

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

给了我这个：

很高兴详细说明......