如何将 html 单选按钮垂直对齐到它的标签?

2022-01-21 00:00:00 radio-button forms html css xhtml

我有一个带有单选按钮的表单，这些单选按钮与其标签位于同一行.然而，单选按钮并未与其标签垂直对齐，如下面的屏幕截图所示.

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;
}

相关文章