Forcing label to flow inline with input that they label

Question

I need the label to stay on the same line as the input field they are labeling  I want these elements to flow like they normally would when the window resizes  i just want the label to stick to the left of the input they are labeling  How would I do that  Any ideas    lt label for  id1  gt label1  lt  label gt   lt input type  text  id  id1   gt   lt label for  id2  gt label2  lt  label gt   lt input type  text  id  id2   gt    ANSWERED  Josiah Ruddell s answer was on the right path  using a span instead of div gave me the correct behavior  Thanks    lt span style  white-space nowrap  gt       lt label for  id1  gt label1  lt  label gt       lt input type  text  id  id1   gt   lt  span gt   lt span style  white-space nowrap  gt       lt label for  id2  gt label2  lt  label gt       lt input type  text  id  id2   gt   lt  span gt

User · Answer

Put the input in the label  and ditch the for attribute   lt label gt    label1     lt input type  text  id  id1  name  whatever    gt   lt  label gt    But of course  what if you want to style the text   Just use a span    lt label id  id1  gt     lt span gt label1  lt  span gt     lt input type  text  name  whatever    gt   lt  label gt

User · Answer

http   jsfiddle net jwB2Y 123   The following CSS class force the label text to flow inline and get clipped if its length is more than max-length of the label    inline-label        white-space  nowrap      max-width  150px      overflow  hidden      text-overflow  ellipsis      float left               HTML    lt div gt       lt label for  id1  class  inline-label  gt This is the dummy text i want to display   lt  label gt       lt input type  text  id  id1   gt   lt  div gt

User · Answer

Why don t You just use   label       display  block      width  50px      height  24px      float  left

User · Answer

What I did so that input didn t take up the whole line  and be able to place the input in a paragraph  I used a span tag and display to inline-block  html    lt span gt cluster           lt input class  short-input  type  text  name  cluster  gt   lt  span gt    css    span display  inline-block

User · Answer

lt style gt   nowrap       white-space  nowrap     lt  style gt         lt label for  id1  class  nowrap  gt label1       lt input type  text  id  id1   gt   lt  label gt    Wrap your inputs within the label tag

User · Answer

If you want they to be paragraph  then use it    lt p gt  lt label for  id1  gt label1  lt  label gt   lt input type  text  id  id1   gt  lt  p gt   lt p gt  lt label for  id2  gt label2  lt  label gt   lt input type  text  id  id2   gt  lt  p gt    Both  lt label gt  and  lt input gt  are paragraph and flow content so you can insert as paragraph elements and as block elements

User · Answer

put them both inside a div with nowrap    lt div style  white-space nowrap  gt       lt label for  id1  gt label1  lt  label gt       lt input type  text  id  id1   gt   lt  div gt

[css] Forcing label to flow inline with input that they label

Examples related to css

Examples related to input

Examples related to label