Equidistant switches via div

Question

I am trying to cover a dynamic number of radio buttons across the width of a div without using tables (if possible). I don’t want their clusters to the left of the div, to the right or in the middle, but I want them to be evenly distributed in width, with spaces the same on both sides of each 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 it better to use a table?

Answer 1

This will not work in <IE8. You could provide conditional rejection in the style of comment tables, 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 .

Answer 2

You can also try this version, as it is a little flexible if you decide to add more radio stations later, and it works on any browser thanks to jQuery. Yes, I know JavaScript for presentation purposes ... {shutter}!

 <script> $(document).ready(function(){ // get width of containing div var width = $('#radios_group').width(); // get the number of radios in this group var count = $('#radios_group input[type=radio]').length // width of each element (take 5 extra pixels off to account for variations) var radio_width = parseInt(width / count) - 5; // loop over each radio and set it to the new width $('#radios_group input[type=radio]').each(function(){ $(this).width(radio_width); }); }); </script> <div id="radios_group" style='width:100%'> <input type="radio"> <input type="radio"> <input type="radio"> <input type="radio"> </div>