将复选框与段落文本内联放置

Question

如何在文本中插入该复选框？

html代码为：

<div class="checkbox checkbox_allow_div"><label class="label_300"><input type="checkbox" name="allow" value="1" class="allow_checkbox"><?php echo gdpr_text('gdpr_order_text'); ?></label></div>

我用php回显的文本，它来自sql表，并写在管理页面上的ckeditor中。 Ckeditor会将文本自动放入<p>标签中。

我无法将复选框代码放入该文本html代码中，因为用户是在管理页面上编写该文本，因此它始终是动态的。

Answer 1

首先，请确保未通过以下方式将复选框定义为块：

.checkbox_allow_div {
  display: inline-block'
}

然后，您可以使用以下样式设置复选框周围的标签和文本的p标签：

label {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

有关Flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

添加display:inline-block作为输入和段落。

.checkbox input,
.checkbox p {
  display: inline-block
}

<div class="checkbox checkbox_allow_div">
  <label class="label_300">
    <input type="checkbox" name="allow" value="1" class="allow_checkbox">
    <p>Random Text</p>
  </label>
</div>