html - 将复选框输入和 标记对齐在同一行

Question

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

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

我将显示设置为 terms-checkbox 的内联 block ，如下所示:

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

但是，这不会水平对齐元素/在同一行中。如果不使用 label 包装 input 标签，我怎样才能使复选框和 p 标签水平对齐？

这是 fiddle 链接:https://jsfiddle.net/eu5rso2a/1/

编辑:固定缩进。

Answer 1

您必须将 terms-checkbox 类设置为 input 或 p 标签。不是他们的 parent 。意味着你的 input 和 p 标签必须是 inline-block