如何在 HTML 的同一行上对齐复选框和文本？

Question

这是我目前拥有的代码。 如何将复选框的格式设置为紧跟在“电子邮件”一词之后，而不是在下一行。

<label for="opt">Check this box to subscribe to our monthly newsletter. You can unsubscribe at any time using the link at the bottom of our email.</label>

<input type="checkbox" id="opt" name="opt" value="true" checked>

 <label for="opt">Check this box to subscribe to our monthly newsletter. You can unsubscribe at any time using the link at the bottom of our email.</label> <input type="checkbox" id="opt" name="opt" value="true" checked>

更多代码

Answer 1

您可以将label的显示设置为阻止。 这意味着它将为自己占据整条线路。 标签标签的默认显示是内联的。 您可以在此处阅读有关块级和内联标记的信息。

因此，您必须将标签标记的显示设置为inline以便复选框可以出现在文本旁边。

 .first { display: block } .second { display: inline }

 <label class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto modi earum laudantium quod facilis ullam eaque reprehenderit, hic autem deserunt dolor ratione animi. Dolor, voluptate!</label> <input type="checkbox"><br/><br/> <label class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto modi earum laudantium quod facilis ullam eaque reprehenderit, hic autem deserunt dolor ratione animi. Dolor, voluptate!</label> <input type="checkbox">