对齐复选框输入和< p>在同一行中标记 [英] 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>

然后我将显示设置为 terms-checkbox的内联代码像这样：

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

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

但是，这不会使项目水平/对齐。不使用标签包装 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标签。不是他们的父母。
表示您的输入和 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

这篇关于对齐复选框输入和< p>在同一行中标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！