如何将 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 单选按钮垂直对齐到它的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！