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

Question

How can i put that checkbox inline with the text?

The html code is:

<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>

The text, that i echo with php, its comeing from sql table, and its writed in a ckeditor on the admin page. Ckeditor put the text automatically in <p> tags.

I cant put the checkbox code into that texts html code, bacause the user is writing the text on the admin page, so its always dynamic.

Answer 1

First, make sure that the checkbox is not defined as a block with:

.checkbox_allow_div {
  display: inline-block'
}

then, you can style the label that is around the checkbox and the text's p tag with:

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

More information on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Add display:inline-block for input and paragraph.

 .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>