html输入元素顺序

Question

I have 2 labels and 2 radio button , and I want to lay them out as (label radio label radio)

<label>Member</label>
<input type="radio" name="type" value="member" /> 
&nbsp;&nbsp;
<label>Company</label>
<input type="radio" name="type" value="company" />

but I get (label label radio radio )!
I changed it into <br/> and moved on, but still I want to know what's wrong !!!!

update:
css file contain

form label { 
display: block;
float: left; 
width: 150px; 
padding: 0; 
margin: 9px 0 0;
text-align: right; }

form input, form select {
margin: 5px 0 0 10px;
padding: 4px;
    float: left; }

I tried for attribute and it worked fine on google chrome& opera but not on IE

Answer 1

This can't happen without some CSS applied, probably

label { float: left; }

Could you provide a link to the problem or a jsfiddle?

edit: none of them should float:

label, input[type="radio"] {
  float: static;
}

or all of them:

label, input[type="radio"] {
  float: left;
}

but not part of them.

Answer 2

Even if my jsfiddle works on Firefox, you should probably try with a for attribute:

<form>
  <label for="Member">Member</label>
  <input type="radio" name="type" id="Member" />
  <br />
  <label for="Company">Company</label>
  <input type="radio" name="type" id="Company" />
</form> 

Answer 3

It probably depends on the web browser you're using, but when I tested your code sample in Firefox on Windows XP, everything looked as expected.

Member o Comoany o

Here's the tricky part, though: Some browsers are more lenient than others in displaying HTML the way we intend versus the way it's supposed to be. I'm sure you're aware of all of that already, but sometimes we run into issues anyway.

Some things to consider:

1) The chosen DOCTYPE which makes some web browsers expect strict adherence to the way we write tags and such.

2) Sometimes, certain web browsers expect form elements to be within a form.

3) A label is typically tied to the corresponding form element. In your case, that would be something like:

<label for="Member">Member</label>
<input type="radio" name="type" id="Member" value="member" />

4) And the CSS. Are you using a CSS reset file? In that case, find out what the label CSS is. Or write your own label CSS and determine how you want it to be laid out (inline, block, float, etc.)

Here's some additional information: http://www.w3schools.com/tags/tag_label.asp

I hope that helps.