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

我的理解是,给一个div显示: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;
}

最佳答案

试试这个删除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

10-07 19:56
查看更多