将单选按钮和标签定位在同一行上

在 HTML 表单中，可以将单选按钮及其关联标签在一行上对齐具有挑战性的。为此，可以采用多种 CSS 技术。

建议的 HTML 结构定位标签和输入元素：

First Item

要水平对齐它们，请添加以下 CSS 规则：

label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}

这会将标签和单选按钮放置在彼此旁边。要确保多个单选按钮在同一行对齐，请使用以下标记：

  

    
    Thing 1
    
    Thing 2
  

使用适当的 CSS 规则，单选按钮和标签将在同一行对齐。