How to align the checkbox and label in same line in html

Question

Within li tags  I am placing a checkbox and label input   If label text is larger than label  the text goes to the next line   I wrapped the label text but it s not aligning the checkbox and label in the same line if label text is too long    lt li gt       lt input id  checkid  type  checkbox  value  test    gt       lt label style  word-wrap break-word  gt testdata lt  label gt   lt  li gt    Thanks

User · Answer

If you are using bootstrap wrap your label and input with a div of a "checkbox" or "checkbox-inline" class.

<li>
    <div class="checkbox">
        <label><input type="checkbox" value="">Option 1</label>
    </div>
</li>

Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

User · Answer

Use below css to align Label with Checkbox       chkbox label                               position  relative                  top  -2px                  lt div class  chkbox  gt   lt asp CheckBox ID  Ckbox  runat  server  Text  Check Box Alignment   gt   lt  div gt

User · Answer

Use this in your li style   style  text-align-last  left

User · Answer

If you are using bootstrap then use this class in the holding div   radio-inline   Example    lt label for  active  class  col-md-4 control-label  gt Active lt  label gt   lt div class  col-md-6 radio-inline  gt       lt input type  checkbox  name  active  value  1  gt   lt div gt    Here the label Active and the checkbox will appear to be aligned

User · Answer

Please try it   lt li gt   lt input id  checkid  type  checkbox  value  test  style  float  left   gt   lt label style  word-wrap  break-word  line-height  16px  float  left   gt testdata lt  label gt   lt  li gt

User · Answer

Wrap the checkbox with the label and check this   HTML    lt li gt        lt label for  checkid   style  word-wrap break-word  gt           lt input id  checkid   type  checkbox  value  test    gt testdata       lt  label gt   lt  li gt    CSS    type  checkbox         vertical-align middle      http   jsfiddle net pKD9K 1

User · Answer

You should use  lt label for    gt  for the checkboxes or radios  and to align checkboxes vertical-align is enough  Try changing your markup to this    lt li gt       lt input id  checkid  type  checkbox  value  test    gt       lt label for  checkid  gt testdata lt  label gt   lt  li gt       lt li gt       lt input id  checkid2  type  checkbox  value  test    gt       lt label for  checkid2  gt testdata 2 lt  label gt   lt  li gt    And set CSS like  input type  checkbox         vertical-align middle      In case of long text  label input      display  inline-block      vertical-align  middle      Side note  In label  value of for must be  the id of checkbox   Fiddle  Updated Fiddle

User · Answer

I had the same problem  but non of the asweres worked for me  I am using bootstap and the following css code helped me  label    display  contents important

User · Answer

Just place a div around the input and label          lt li gt         lt div gt           lt input id  checkid   type  checkbox  value  test    gt         lt  div gt         lt div gt           lt label  style  word-wrap break-word  gt testdata lt  label gt         lt  div gt       lt  li gt

User · Answer

None of these suggestions above worked for me as-is   I had to use the following to center a checkbox with the label text displayed to the right of the box   lt style gt   checkboxes     display  flex    justify-content  center    align-items  center    vertical-align  middle    word-wrap  break-word     lt  style gt    lt label for  quot checkbox1 quot  class  quot checkboxes quot  gt  lt input type  quot checkbox quot  id  quot checkbox1 quot  name  quot checked quot  value  quot yes quot  class  quot checkboxes quot   gt  Check the box  lt  label gt

User · Answer

Another approach here   checkbox-wrapper     white-space  nowrap    checkbox     vertical-align  top    display inline-block    checkbox-label     white-space  normal   display inline-block     lt div class  quot text-left checkbox-wrapper quot  gt     lt input type  quot checkbox quot  id  quot terms quot  class  quot checkbox quot  gt     lt label class  quot checkbox-label quot  for  quot terms quot  gt I accept whatever you want  lt  label gt   lt  div gt

[html] How to align the checkbox and label in same line in html?

Examples related to html

Examples related to css