如何编写此 HTML 代码，将“Loving”一词包装在标签中

Question

<label for="loving">Loving</label>
<input id="loving" type="checkbox">

我的代码有什么问题，我该如何做下面声明中要求我做的事情

如何使“Loving”一词位于此代码中的复选框顶部

还有另一种方法可以将输入元素的文本与元素本身关联起来。您可以将文本嵌套在 label 元素中，并添加一个与输入元素的 id 属性具有相同值的 for 属性。通过仅将文本 Loving 嵌套在 label 元素中并为其指定适当的 for 属性，将文本 Loving 与复选框关联起来。

我尝试将 Loving 一词嵌套在标签中，但代码不会显示在网页上。

Answer 1

你可以添加一些CSS并使其成为居中的列。

<style>
    .checkbox-label {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

<label for="loving" class="checkbox-label">Loving
    <input id="loving" type="checkbox">
</label>