如何将一组 html 单选按钮放在带有 div 的字段集中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18479570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center a set of html radio buttons in a fieldset with div
提问by abalter
I have a set of radio buttons and labels. The radio buttons precede the labels. I would like to center the set of them within a field set. I tried putting them in a div with display set to inline-block. Almost works, but one label gets bumped down to the next line.
我有一组单选按钮和标签。单选按钮位于标签之前。我想将它们集中在一个字段集中。我尝试将它们放在一个 div 中，显示设置为 inline-block。几乎有效，但一个标签被撞到下一行。
My understanding was that giving a div display: inline-block would make it shrink-to-fit, but I'm getting the unexpected behavior you can see here (code below):
我的理解是，给一个 div display: inline-block 会使它缩小到适合，但我得到了你可以在这里看到的意外行为（下面的代码）：
http://jsfiddle.net/abalter/TedVe/13/
http://jsfiddle.net/abalter/TedVe/13/
Is my only hope to manually set margins and stuff? Is there a way to understand why the div is shrinking just a bit too much??
我唯一的希望是手动设置边距和东西吗？有没有办法理解为什么 div 收缩得有点太多了？
Update... If I remove the right margin from the label (which is there to add space before the next radio button) then it fits. If, instead, I add margin-left to the button, I still have the problem.
更新...如果我从标签中删除右边距（在下一个单选按钮之前添加空格）然后它适合。相反，如果我向按钮添加 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;
}
回答by Rohit Azad
Try this removefloat lefton your .radio-labeland .radio-inputand now define
试试这个删除float left您 .radio-label和.radio-input现在定义
display inline-block
As like this
像这样
.radio-label {
display: inline-block;
vertical-align: top;
margin-right: 3%;
}
.radio-input {
display: inline-block;
vertical-align: top;
}
回答by Bart Calixto
Just remove all styles but text-align:center and you got it. No need to display: inline-block.
只需删除除 text-align:center 之外的所有样式即可。无需显示：inline-block。
here's an updated fiddle:
这是一个更新的小提琴：
.radio-label {}
.radio-input {}
fieldset {
text-align: center;
}
div {}
回答by abalter
use this following css.
.radio-label {
margin-right: 3%;
}
fieldset {
text-align: center;
}
div {
display:inline;
border: 1px solid black;
}
回答by Rejayi CS
add width for div then your problem may fixed
为 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%
}
