Radio/checkbox alignment in HTML/CSS

Question

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:

&l         


        

Answer 1

If your label is long and goes on multiple rows setting the width and display:inline-block will help.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}


    
    Option 1 is very long and is likely to go on two lines.
    
    Option 2 might fit into one line.