Equidistant radio buttons across div

Question

I'm trying to span a dynamic amount of radio buttons across the entire width of a div without the use of tables (if possible). I don't want a clump of them to the left of the div, the right, or the middle, but I want them equally spaced along the width, with whitespace the same on either side of every single button.

<div style='width:100%'>
  <input type="radio">
  <input type="radio">
  <input type="radio">
  <input type="radio">
</div>

Can this be done in CSS? If not, is the best alternative to use a table?

Answer 1

This won't work in < IE8. You could provide a conditional comment stylesheet fallback, perhaps by floating them.

Example

HTML

<div id="container">
    <div><input type="radio"></div>
    <div><input type="radio"></div>
    <div><input type="radio"></div>
    <div><input type="radio"></div>
</div>

CSS

#container {
    display: table;  
    width: 100%;
}

#container div {
    display: table-cell; 
    text-align: center;
} 

jsFiddle.

Test it by adding new elements.