如何对齐复选框长标签？ [复制]

Question

我有带标签的复选框，正常标签按预期显示，没有问题。

当前情况： 但是当我给出长标签时，文本会转到下一行并在复选框下开始。

工作片段：

.checkbox input {
    display: none;
}

.checkbox__input {
    width: 1pc;
    height: 1pc;
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0 0 #049fd9;
    border: 1px ridge #049fd9;
}

input:checked~.checkbox__label {
  font-weight: 400;
    font-size: 9pt;
    font-family: Regular;
    display: inline;
    position: relative;
}

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox One</span>
</label>
<br />

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox Two</span>
</label>
<br />

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action.</span>
  <label>
<br />

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox Four</span>
</label>

预期结果：

-> 对于长标签，当标签转到下一行时，它应该从上一行的开头开始。

***Checkbox*** Label text needs to be really really long to show this in action. Label text needs to be really 
               really long to show this in action. Label text needs to be really really long to show this in 
               action. 

我尝试过的事情：

input:checked~.checkbox__label {
   display: flex;
   flex-wrap: wrap
}

上面那个不行..

这是一个动态生成的复选框，所以我不能单独更改长文本标签的 css 样式。它需要通用并解决一般的长文本问题。另外请不要修改给定的类和元素..我需要通过只修改css属性来达到结果..

任何好的帮助将不胜感激。谢谢..

Answer 1

您需要将position: absolute 设置为checkbox__input 并以position:relative 为标签

.checkbox  {
    position: relative;
    padding-left: 25px;
    display: block;
}
.checkbox input {
    display: none;
}

.checkbox__input {
    width: 1pc;
    height: 1pc;
    display: inline-block;
    position: absolute; /*change here*/
    box-shadow: inset 0 0 0 0 #049fd9;
    border: 1px ridge #049fd9;
    top: 0;
    left: 0;
}

input:checked~.checkbox__label {
  font-weight: 400;
    font-size: 9pt;
    font-family: Regular;
    display: inline;
    position: relative;
}

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox One</span>
</label>
<br />

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox Two</span>
</label>
<br />

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action.</span>
</label>
<br />

<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox Four</span>
</label>