Radio buttons and label to display in same line

Question

Why my labels and radio buttons won t stay in the same line  what can I do    Here is my form    lt form name  submit  id  submit  action     method  post  gt       lt  php echo form hidden  what    item-   identifier    gt        lt label for  one  gt First Item lt  label gt       lt input type  radio  id  one  name  first item  value  1    gt        lt label for  two  gt Second Item lt  label gt       lt input type  radio  id  two  name  first item  value  2    gt       lt input class  submit form  name  submit  type  submit  value  Choose  tabindex  4    gt   lt  form gt

User · Answer

I was having the similar issue of keeping all radio buttons on the same line  After trying all the things I could  nothing worked for me except the following  What I mean is simply using table resolved the issue allowing radio buttons to appear in the same line    lt table gt   lt tr gt       lt td gt           lt label gt               Html RadioButton  p sortForPatch    byName   new    checked    checked    class    radio     By Name          lt  label gt       lt  td gt       lt td gt           lt label gt               Html RadioButton  p sortForPatch    byDate   new    class    radio     By Date          lt  label gt       lt  td gt   lt  tr gt   lt  table gt

User · Answer

Hmm  By default   lt label gt  is display  inline  and  lt input gt  is  roughly  at least  display  inline-block   so they should both be on the same line  See http   jsfiddle net BJU4f   Perhaps a stylesheet is setting label or input to display  block

User · Answer

you might have a width specified for your input tags somewhere in your css   add a class  radio  to your radio boxes and an input radio  width  auto   to your css

User · Answer

What I ve always done is just wrap the radio button inside the label      lt label for  one  gt   lt input type  radio  id  one  name  first item  value  1    gt  First Item  lt  label gt    Something like that  has always worked for me

User · Answer

If you use the HTML structure I lay out in this question you can simply float your label and input to the left and adjust padding margin until things are lined up   And yes  you ll want to make your radio button have a class name for old IE  And to have all of them on the same line  according to the markup I linked to above  it would be like so    x000D   x000D  fieldset   x000D        overflow  hidden x000D        x000D       x000D       some-class   x000D        float  left  x000D        clear  none  x000D        x000D       x000D      label   x000D        float  left  x000D        clear  none  x000D        display  block  x000D        padding  0px 1em 0px 8px  x000D        x000D       x000D      input type radio   x000D      input radio   x000D        float  left  x000D        clear  none  x000D        margin  2px 0 0 2px  x000D        x000D   lt fieldset gt  x000D         lt div class  some-class  gt  x000D           lt input type  radio  class  radio  name  x  value  y  id  y    gt  x000D           lt label for  y  gt Thing 1 lt  label gt  x000D           lt input type  radio  class  radio  name  x  value  z  id  z    gt  x000D           lt label for  z  gt Thing 2 lt  label gt  x000D         lt  div gt  x000D       lt  fieldset gt  x000D   x000D   x000D

User · Answer

Put them both to display inline

User · Answer

I m assuming the problem is that they are wrapping onto separate lines when the window is too narrow   As others have pointed out  by default the label and input should be  display inline    so unless you have other style rules that are changing this  they should render on the same line if there is room   Without changing the markup  there will be no way to fix this using only CSS   The simplest way to fix it would be to wrap the radio button and label in a block element  such as a p or a div  and then prevent that from wrapping by using white-space nowrap   For example    lt div style  white-space nowrap   gt     lt label for  one  gt First Item lt  label gt     lt input type  radio  id  one  name  first item  value  1    gt   lt  div gt

User · Answer

I wasn t able to reproduce your problem in Google Chrome 4 0  IE8  or Firefox 3 5 using that code  The label and radio button stayed on the same line   Try putting them both inside a  lt p gt  tag  or set the radio button to be inline like The Elite Gentleman suggested

User · Answer

My answer from a different post on the same subject should help you zend form for multicheckbox remove input from labels

User · Answer

fieldset     overflow  hidden     class     float  left    clear  none     label     float  left    clear  both    display initial     input type radio  input radio     float  left    clear  both

User · Answer

I always avoid using float left but instead I use display  inline   x000D   x000D   wrapper-class input type  radio     x000D    width  15px  x000D    x000D   x000D   wrapper-class label   x000D    display  inline  x000D    margin-left  5px  x000D      x000D   lt div class  wrapper-class  gt  x000D     lt input type  radio  id  radio1  gt  x000D     lt label for  radio1  gt Test Radio lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I use this code and works just fine   input type  checkbox     input type  radio    input radio  input checkbox       vertical-align text-top      width 13px      height 13px      padding 0      margin 0      position relative      overflow hidden      top 2px      You may want to readjust top value  depends on your line-height   If you don t want IE6 compatibility  you just need to put this code into your page  Otherwise  you will must add extra class to your inputs  you can use jQuery - or any other library - for that tho

User · Answer

Note  Traditionally the use of the label tag is for menus  eg    lt menu gt   lt label gt Option 1 lt  label gt   lt input type  radio  id  opt1  gt    lt label gt Option 2 lt  label gt   lt input type  radio  id  opt2  gt    lt label gt Option 3 lt  label gt   lt input type  radio  id  opt3  gt     lt  menu gt

User · Answer

If the problem is that the label and input are wrapping to two lines when the window is too narrow  remove the whitespace between them  e g     lt label for  one  gt First Item lt  label gt   lt input type  radio  id  one  name  first item  value  1    gt    If you need space between the elements  use non-breaking spaces   amp amp  nbsp   or CSS

User · Answer

Used table to align the radio and text in one line         x000D   x000D   lt div  gt  x000D     lt table gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt  lt strong gt Do you want to add new server   lt  strong gt  lt  td gt  x000D           lt td gt  lt input type  radio  name  addServer  id  serverYes  value  1  gt  lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt  lt input type  radio  name  addServer  id  serverNo  value  1  gt  lt  td gt  x000D           lt td gt No lt  td gt  x000D   x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Radio buttons and label to display in same line

Examples related to html

Examples related to css