Как центрировать набор кнопок html в полевом поле с div

Question

У меня есть набор переключателей и меток. Радиокнопки предшествуют ярлыкам. Я хотел бы сосредоточить их в наборе полей. Я попытался поместить их в div с дисплеем, установленным в встроенный блок. Почти работает, но один ярлык попадает на следующую строку.

Мое понимание, что дает отображение Div: встроенный блок сделает его shrink-to-fit, но я получаю неожиданное поведение, которое вы можете увидеть здесь (код ниже):

http://jsfiddle.net/abalter/TedVe/13/

мой единственный надеяться вручную установить маржу и прочее? Есть ли способ понять, почему div сжимается слишком много?

Обновление ... Если я удалю правое поле с метки (которое есть, чтобы добавить место перед следующим переключателем), то оно подходит. Если вместо этого я добавляю маркер слева к кнопке, у меня все еще есть проблема.

<form> 
<fieldset> 
    <legend>Test</legend> 
    <div> 
     <input class="radio-input" type="radio" name="test" value="yes" /> 
     <label class="radio-label">Yes</label> 
     <input class="radio-input" type="radio" name="test" value="yes" /> 
     <label class="radio-label">No</label> 
     <input class="radio-input" type="radio" name="test" value="yes" /> 
     <label class="radio-label">Maybe</label> 
    </div> 
</fieldset> 

.radio-label { 
    float: left; 
    margin-right: 3%; 
} 
.radio-input { 
    float: left; 
} 
fieldset { 
    text-align: center; 
} 
div { 
    display: inline-block; 
    margin: auto; 
    border: 1px solid black; 
} 

Answer 1

Попробуйте удалитьfloat left на вашем .radio-label и .radio-input и теперь определяют

display inline-block 

Как, как это

.radio-label { 
    display: inline-block; 
    vertical-align: top; 
    margin-right: 3%; 
} 
.radio-input { 
    display: inline-block; 
    vertical-align: top; 
} 

Demo

Answer 2

Просто удалите все стили, но выравнивания текста: центр и вы его получили. Нет необходимости отображать: встроенный блок.

вот обновленная скрипка:

http://jsfiddle.net/TedVe/8/

.radio-label {} 
.radio-input {} 
fieldset { 
    text-align: center; 
} 
div {} 

Answer 3

use this following css. 

.radio-label { 
    margin-right: 3%; 
} 

fieldset { 
    text-align: center; 
} 
div { 
    display:inline; 
     border: 1px solid black; 
} 

Answer 4

ширин добавить для DIV, то ваша проблема может фиксированную

.radio-label { 
    float: left; 
    margin-right: 3%; 
} 
.radio-input { 
    float: left; 
} 
fieldset { 
    text-align: center; 
} 
div { 
    display: inline-block; 
    margin: auto; 
    border: 1px solid black; 
    width:50% 
}