5

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

我的理解是，给出一个 div display: 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;
}
4

4 回答 4

6

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

演示

于 2013-08-28T04:40:57.927 回答
6

只需删除除 text-align:center 之外的所有样式即可。无需显示：inline-block。

这是一个更新的小提琴：

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

.radio-label {}
.radio-input {}
fieldset {
    text-align: center;
}
div {}
于 2013-08-28T04:41:00.700 回答
1 
use this following css.

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

fieldset {
    text-align: center;
}
div {
     display:inline;
        border: 1px solid black;
}
于 2013-08-28T05:00:19.057 回答
0

为 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%
}
于 2013-08-28T07:17:24.553 回答