对齐无线电按钮及其标签
对齐无线电按钮及其标签
提问于 2015-06-29 14:56:53
我现在正变得疯狂，因为我试图设置我的单选按钮数小时，我无法达到我的目标(我对css的世界完全陌生)。
我想做的很简单：
我想要三个大的无线电按钮下面，在我的div中心与标签垂直对齐的按钮。与此类似的是：
我有以下html：
<div class="answers">
<label>
<input type="radio" name="answers" value="male" /> All
</label>
<label>
<input type="radio" name="answers" value="female" /> Name
</label>
<label>
<input type="radio" name="answers" value="male" /> Vendor No.
</label>
</div>结果是：
我想要更大的按钮和更大的文本。我希望文本在臀部的右边，用一点垫子。我希望所有的单选按钮都居中。我试了很多次，但一切看起来都很奇怪。请帮帮我..。我开始讨厌css..。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-06-29 15:04:26
您可以使用这个CSS：
.answers label {
display: block;
font-size: 20px;
line-height: 30px;
margin: 0 auto;
width: 150px;
}
.answers {
width: 100%;
}
.answers input[type="radio"] {
height: 30px;
line-height: 30px;
vertical-align: bottom;
width: 30px;
}JSFiddle：http://jsfiddle.net/ghorg12110/uqyfbjsb/
Stack Overflow用户
发布于 2015-06-29 15:00:16
发生这种情况的唯一原因是在你的css中的某个地方有display: block广播：
input[type=radio] {
display: block;
}<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
您可以使用display: block将nth-child添加到第二个标签
label:nth-child(2) {
display: block;
}<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
参考资料
Stack Overflow用户
发布于 2015-06-29 15:00:50
http://jsfiddle.net/6b888vp8/2/
添加display:阻止到中的标签，然后向左浮动到输入。HTML也发生了变化
.answers label {
display: block
}
.answers input[type="radio"] {
float: left;
}
<div class="answers">
<input type="radio" name="answers" value="male" /><label>All</label>
<input type="radio" name="answers" value="female" /><label>Name</label>
<input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31118947
复制相关文章
相似问题
腾讯云开发者
