如何在表单中水平对齐单选按钮和标签？

单选按钮和标签水平对齐

创建表单时，标签和单选按钮出现在不同的行上可能会令人沮丧。要解决此问题并保持它们水平对齐：

解决方案：

将标签和单选按钮浮动到左侧，并根据需要调整内边距和边距。此外，为旧版本 Internet Explorer 的单选按钮指定一个类名称。要为所有按钮实现相同的内联对齐，请使用以下 HTML 结构：

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

<code class="css">fieldset {
  overflow: hidden;
}

.some-class {
  float: left;
  clear: none;
}

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>

通过遵循这些准则，您可以确保标签和单选按钮出现在同一行，从而为用户提供无缝的体验填写表格的经验。

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