问题描述
我见过大多数使用标签来解决此问题的其他解决方案.不幸的是，我不能在这种特殊情况下使用标签，因为那样会搞砸.我有以下内容:
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
这篇关于对齐复选框输入和 <p>标记在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！