如何对齐复选框长标签？

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 样式。它需要通用并解决一般的长文本问题。另外请不要修改给定的 class 和元素。我需要通过仅修改 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>

如何对齐复选框长标签？

How to align checkbox long label?

html

css

checkbox

label