将单选按钮和标签放置在同一行
在 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中文网其他相关文章！
