调整窗口大小时，保持复选框在窗体中的位置

Question

.left-col {
    width:25%; }

    label {
    width:100%; 
    position:relative; }

    input[type="checkbox"] + div::before {
     right:-35px !important;
      left: auto !important; }

     input[type="checkbox"] + div::after {
     left: auto !important;
      right: -33px !important;
       width: auto; }

<div class="left-col"> <label>
    <span>text</span>
    <input type="checkbox">
    <div></div>
    </label> </div>

我有两栏表格。我在标签内有带有div伪类的复选框。我需要将复选框放置在右列中并且仍在标签内。 问题是，我不能以这种方式更改它，复选框将在标签内，并且在调整窗口大小时将保持在同一位置。

我可以保留带有负右属性的复选框，以便在调整大小时它不会改变位置，但是它在标签外面并且不可点击。

我可以更改标签的宽度-但是在调整大小时复选框会跳转。

有什么办法可以用CSS解决这个问题？

调整大小时没有负右的复选框位置：

我需要的复选框位置：

Answer 1

如评论中所述，您可以将复选框置于标签之外，并使用for属性更改其状态。至于对齐，可以这样做。

.left-col {
   display: block;
   width: 25%;
   position: relative;
}

label {
   display: inline;
}

input[type="checkbox"] {
   position: absolute;
   display: inine;
   right: 0;
}

<div class="left-col">
   <label for="idCheckbox">text</label>
   <input type="checkbox" id="idCheckbox">
</div>

Answer 2

问题是通过将.left-col的宽度更改为100％（在复选框行上），然后调整跨度和标签的边距和填充来解决的。