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

2022-01-19 00:00:00 forms frontend alignment html css

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

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>

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

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

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

但是，这不会将项目水平对齐/在同一行中.如果不使用 label 包装 input 标签，如何使复选框和 p 标签水平对齐?

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?

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

固定缩进.

推荐答案

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

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

相关文章