Align a checkbox input and a <p> tag in the same line

问题

I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:

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

And I'm setting display to be inline-block for terms-checkbox like so:

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

However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?

Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/

edit: fixed indentation.

回答1:

You must set the terms-checkbox class to input or p tag. Not their parent. Means your input and p tag must be inline-block

回答2:

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

来源：https://stackoverflow.com/questions/51922044/align-a-checkbox-input-and-a-p-tag-in-the-same-line