css - 如何使用 div 在字段集中居中放置一组 html 单选按钮

Question

我有一组单选按钮和标签。单选按钮位于标签之前。我想将它们集中在一个字段集中。我试着把它们放在一个显示设置为内联 block 的 div 中。几乎可以工作，但一个标签会被移到下一行。

我的理解是给一个 div display: inline-block 会让它成为 shrink-to-fit ，但我得到了您可以在此处看到的意外行为(下面的代码):

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

在你的.radio-label 和.radio-input 上尝试这个remove float left 现在定义

display inline-block

像这样

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

Demo