调整窗口大小时将复选框位置保留在表单中答案

【问题标题】：Keep checkbox position in form when resizing window调整窗口大小时将复选框位置保留在表单中
【发布时间】：2018-08-03 07:56:20
【问题描述】：

.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 解决这个问题？

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

我需要的复选框位置：

【问题讨论】：

为什么需要将输入放在标签内？
因为相同的checkbox html模型用在app的不同部分，如果用户可以点击标签的文本和“激活”复选框，会很方便。
好吧，但是给输入一个id 并使用标签的for 属性更方便。这样你就可以把标签放在你想要的任何地方。这甚至可能适用于您的情况，试试吧。
是的，它已经在使用（使用 Angular）——每个复选框的“for”和“id”都不同。

标签： html forms css checkbox position

【解决方案1】：

正如 cmets 中所说，您可以将复选框放在标签之外并使用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>

【讨论】：

【解决方案2】：

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

【讨论】：