将复选框与段落文本内联

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>