跨 div 的等距单选按钮答案

【问题标题】：Equidistant radio buttons across div跨 div 的等距单选按钮
【发布时间】：2011-03-18 13:49:51
【问题描述】：

我正在尝试在不使用表格的情况下跨越 div 的整个宽度的动态数量的单选按钮（如果可能的话）。我不希望它们在 div 的左侧、右侧或中间有一大堆，但我希望它们沿宽度等距分布，每个按钮的两侧都有相同的空白。

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

这可以在 CSS 中完成吗？如果不是，是使用表格的最佳替代方案吗？

【问题讨论】：

标签： html css alignment

【解决方案1】：

这在

示例

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.

【讨论】：

【解决方案2】：

您可能还想尝试这个版本，因为如果您决定稍后添加更多收音机，它会有点灵活，并且由于 jQuery，它可以在任何浏览器上运行。是的，我知道，用于演示目的的 JavaScript...{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>

【讨论】：

除了浏览器支持之外，添加新的radio 输入时灵活性较差（因为您需要再次运行此函数）。