本文介绍了如何将 html 单选按钮垂直对齐到它的标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有单选按钮的表单，这些单选按钮与其标签位于同一行.然而，单选按钮并未与其标签垂直对齐，如下面的屏幕截图所示.
I have a form with radio buttons that are on the same line as their labels. The radio buttons are however not aligned vertically with their labels as shown in the screenshot below.
如何将单选按钮与其标签垂直对齐?
How can I vertically align the radio buttons with their labels?
这是html代码:
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>
还有css代码:
label{
padding:5px;
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
margin: 10px;
}
推荐答案
试试这个:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
这篇关于如何将 html 单选按钮垂直对齐到它的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！