跨越div的等距单选按钮

Question

我试图在div的整个宽度上跨越动态数量的单选按钮而不使用表格(如果可能的话).我不希望它们在div的左边,右边或中间有一团,但是我希望它们沿着宽度等间隔,每个按钮的两边都有相同的空白.

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

这可以在CSS中完成吗？如果没有,是使用表的最佳选择吗？

Answer 1

这在<IE8中不起作用.您可以通过浮动它们来提供条件注释样式表回退.

例

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.

通过添加新元素来测试它.