将复选框移到文本的左上角

Question

我在HTML中的复选框组件上遇到了一些问题。目前我的复选框如下：

代码片段：

<p class="rte" style="display:grid; grid-template-columns: auto auto; font-size:12px;font-weight:400;margin-bottom:10px;">
<input type="checkbox" checked style="width:auto;" />
<label>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti 
<a href="/website.com/">MY LINK.</a></label></p>

现在复选框在文本的中间，但我需要它在左上角。我该怎么做？

Answer 1

在输入元素上使用align-self: start;：

CSS：

input {
align-self: start;
}

https://jsfiddle.net/br3k1wfu

就像其他人提到的那样，你的HTML有一些问题。p和a元素结束标记位于错误的位置。您可以在JS fiddle中看到它们以红色突出显示。此外，使用内联样式是一种糟糕的做法，会使代码难以阅读和维护。更喜欢将样式添加到单独的CSS文件中。

示例：

.rte {
display: grid;
grid-template-columns: auto auto;
font-size: 12px;
font-weight: 400;
margin-bottom: 10px;
}
#my-input {
width: auto;
align-self: start;
}

https://jsfiddle.net/xv3kyLqo/