将标签说明放在输入元素下方

Question

我想通过视觉实现的目标：https://imgur.com/tgjsSOX

我最接近的近似值：https://codepen.io/anon/pen/xzQLQw

现在将说明放在复选框下方，我可以像这样添加类uk-flex-column：https://codepen.io/anon/pen/gKQGWd

到输入元素的父div，以强制进行列堆叠。

只要不将窗口调整为较小的宽度，此方法就可以正常工作。

如果调整了大小，则列中的内容会更改其位置，并且复选框不会停留在删除线处。

调整窗口大小后，我该如何强制复选框保持在行中？

Answer 1

更改以下CSS：

.strikethrough {
position: absolute;
width: 100%;
top: 40px;
left: 0px;
height: 5px;
background: gainsboro;
z-index: -1;
}

通过将顶部设置为固定的像素高度而不是百分比，即使在调整窗口大小时也应保持对齐。