I have my html form like this as shown in this jsfiddle.

If you click PROCESS button then it will show you a form which has two radio button. And they all are ing vertically for now, meaning female radio button is ing just below male radio button.

And I am trying to make them in one line - meaning Male radio button and then next to male, I need Female radio button, everything horizontal. But somehow it's not working for me.

But the same example here in w3schools works fine.

I would like to use the same design which I am using currently. Is there anything wrong I am doing here in my above jsfiddle?

I have my html form like this as shown in this jsfiddle.

If you click PROCESS button then it will show you a form which has two radio button. And they all are ing vertically for now, meaning female radio button is ing just below male radio button.

And I am trying to make them in one line - meaning Male radio button and then next to male, I need Female radio button, everything horizontal. But somehow it's not working for me.

But the same example here in w3schools works fine.

I would like to use the same design which I am using currently. Is there anything wrong I am doing here in my above jsfiddle?

• javascript
• jquery
• html
• css
• jsp

3 Answers 3

Change form input, form button#submit { to #submit {

jsFiddle example

Your display:block rule is being applied to all input elements and you don't want to include the radio inputs there.

You'd use:

form input[type="radio"] {
  display: inline-block;    
}

As currently you were displaying it as a block-line element instead (along with the submit), hence why it was appearing below.

jsFiddle here.

 form button#submit 
{
display: inline;
margin: 4px;
 }

change the style to above.