将复选框输入和 <p> 标签对齐在同一行

Question

我见过大多数使用标签来解决此问题的其他解决方案。不幸的是，我不能在这个特殊情况下使用标签，因为这会把事情搞砸。我所拥有的是以下内容：

<div className="terms-checkbox">
  <input type="checkbox" required />
  <p>I accept the Terms and Conditions</p>
</div>

我将

terms-checkbox

的显示设置为内联块，如下所示：

    .terms-checkbox {
      display: inline-block;
    }

但是，这不会水平对齐项目/在同一行中。如果不使用

input

包裹

label

标签，如何使复选框和

p

标签水平对齐？

这是小提琴链接：https://jsfiddle.net/eu5rso2a/1/

编辑：固定缩进。

Answer 1

您必须将

terms-checkbox

类设置为 input 或 p 标签。不是他们的父母。 意味着您的

input

和

p

标签必须是

inline-block

Answer 2

<p><input type="checkbox" required/>I accept the Terms and Conditions</p>

Answer 3

在输入上设置样式

vertical-align: "sub";

（如果适用，您也可以尝试将其设置为“底部”）