html - 调整窗口大小时保持复选框在表单中的位置

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 伪类的复选框。我需要将复选框放置在右栏中并且仍然在标签内。 问题是，我无法以这种方式更改它，该复选框将位于标签内，并且在调整窗口大小时将保持在同一位置。

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

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

有没有办法用 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>