對齊復選框輸入和 <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;
    }

但是，這不會使項目水平/在同一行中對齊。 在不使用label包裝input label ，如何使復選框和p標簽水平對齊？

這是小提琴鏈接： https : //jsfiddle.net/eu5rso2a/1/

編輯：固定縮進。

Answer 1

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

Answer 2

您必須將terms-checkbox類設置為input或p標簽。 不是他們的父母。 意味着您的input和p標簽必須是inline-block