如何在 HTML 中将单选按钮和标签对齐在同一行？

将单选按钮和标签放置在同一行

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

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

<code class="html"><label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" /></code>

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

<code class="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;
}</code>

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

<code class="html"><fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>
</fieldset></code>

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

以上是如何在 HTML 中将单选按钮和标签对齐在同一行？的详细内容。更多信息请关注PHP中文网其他相关文章！