How to force a checkbox and text on the same line

Question

How can I force a checkbox and following text to appear on the same line  In the following HTML  I d only want the line to break between label and input  not between input and label    lt p gt  lt fieldset gt       lt input type  checkbox  id  a  gt       lt label for  a  gt a lt  label gt       lt input type  checkbox  id  b  gt       lt  -- depending on width  a linebreak can occur here  -- gt       lt label for  b  gt b lt  label gt       lt input type  checkbox  id  c  gt       lt label for  c  gt c lt  label gt   lt  fieldset gt  lt  p gt    To clarify  if the fieldset p is not wide enough for all elements  instead of      a    b    c    d    e   I want      a    b    c    d    e

User · Answer

http   jsbin com etozop 2 edit  put a div wrapper with WIDTH       lt p gt  lt fieldset style  width 60px   gt      lt div style  border solid 1px red width 80px   gt       lt input type  checkbox  id  a  gt       lt label for  a  gt a lt  label gt       lt input type  checkbox  id  b  gt        lt label for  b  gt b lt  label gt      lt  div gt        lt input type  checkbox  id  c  gt       lt label for  c  gt c lt  label gt   lt  fieldset gt  lt  p gt    a name could be   john winston ono lennon  which is very long    so what do you want to do   youll never know the length     you could make a function that wraps after x chars like    john winston o

User · Answer

You can wrap the label around the input        lt label for  a  gt  lt input type  checkbox  id  a  gt a lt  label gt      This worked for me

User · Answer

Another way to do this solely with css   input type  checkbox       float  left    width  20px    input type  checkbox     label     display  block    width  30px      Note that this forces each checkbox and its label onto a separate line  rather than only doing so only when there s overflow

User · Answer

Try this CSS   label     display  inline-block

User · Answer

It wont break if you wrap each item in a div  Check out my fiddle with the link below  I made the width of the fieldset 125px and made each item 50px wide  You ll see the label and checkbox remain side by side on a new line and don t break    lt fieldset gt   lt div class  item  gt       lt input type  checkbox  id  a  gt       lt label for  a  gt a lt  label gt   lt  div gt   lt div class  item  gt      lt input type  checkbox  id  b  gt   lt  -- depending on width  a linebreak can occur here  -- gt       lt label for  b  gt bgf bh fhg fdg hg dg gfh dfgh lt  label gt   lt  div gt   lt div class  item  gt       lt input type  checkbox  id  c  gt       lt label for  c  gt c lt  label gt   lt  div gt   lt  fieldset gt    http   jsfiddle net t5dwp7pg 1

User · Answer

Try this   The following considers checkbox and label as a unique element    lt style gt     item  white-space  nowrap display inline     lt  style gt   lt fieldset gt   lt div class  item  gt       lt input type  checkbox  id  a  gt       lt label for  a  gt aaaaaaaaaaaa aaaa a a a a a a aaaaaaaaaaaaa lt  label gt   lt  div gt   lt div class  item  gt      lt input type  checkbox  id  b  gt   lt  -- depending on width  a linebreak NEVER occurs here  -- gt       lt label for  b  gt bbbbbbbbbbbb bbbbbbbbbbbbbbbbb  b b b b  bb lt  label gt   lt  div gt   lt div class  item  gt       lt input type  checkbox  id  c  gt       lt label for  c  gt ccccc c c c c ccccccccccccccc  cccc lt  label gt   lt  div gt   lt  fieldset gt

[html] How to force a checkbox and text on the same line?

Examples related to html