Эквидистантные радиокнопки через div

Question

Я пытаюсь распределить динамическое количество переключателей по всей ширине div без использования таблиц (если это возможно). Я не хочу, чтобы их скопления располагались слева от div, справа или по центру, но я хочу, чтобы они были равномерно распределены по ширине с одинаковыми пробелами с обеих сторон каждой кнопки.

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

Можно ли это сделать в CSS? Если нет, то является ли лучшей альтернативой использование стола?

Answer 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 .

Проверьте это, добавив новые элементы .

Answer 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>