如何使用div将字符集中的一组html单选按钮居中

Question

我有一组单选按钮和标签.单选按钮位于标签之前.我想将它们的集合置于字段集中.我尝试将它们放在显示设置为内联块的div中.几乎可以工作,但是一个标签会下降到下一行.

我的理解是给出一个div显示:inline-block会使它缩小到适合,但是我得到了你可以在这里看到的意外行为(代码如下):

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

我唯一希望手动设置边距和内容吗？有没有办法理解为什么div正在缩小太多？

更新...如果我从标签中删除右边距(在下一个单选按钮之前添加空格)则适合.相反,如果我在按钮上添加margin-left,我仍然有问题.

<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;
}

演示

Answer 2

只需删除所有样式,但文本对齐:中心,你得到它.无需显示:内联块.

这是一个更新的小提琴:

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

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