Issue aligning radio button with label

Hi I have already read posts which suggest using style="vertical-align: middle;"

however this is not working for me. I am a beginner so I was hoping somebody could take a look. I've been playing around on jsfiddle with it and getting nowhere.

here is my jsfiddle.

It is a dynamic form so to get to the area I am having the issue you must select option 5 "True/false" on the drop down.

as for the html for it开发者_JAVA技巧, it is located within the javascript in 'case 5'.

Also for some reason on the jsfiddle one label is out of line and I don't know why as it works fine on firefox and chrome :S

please enlighten me, thanks

I eliminated many of the float on labels and inputs, and set width: auto and it improved greatly. That would affect all inputs though, and I think part of your problem is the large width of just the radio button inputs.

As a broader issue, I would probably have all those question types already in the page in hidden divs, and show the appropriate one when the question type is selected. That makes it easier to work with your CSS by showing them all during dev/debug of the styles then hiding them when you're done.

Not much of an answer, but it's all I've got without really digging into the fiddle a lot.

Try this and play with the margins to get the desirable output.

#stylized label.smaller input{
  float:none;
  width: 25px;
}