如何在 HTML 中将输入元素和标签对齐在同一行？

将输入元素与标签在同一行上对齐

在 HTML 中，通常需要将标签和输入元素放置在同一水平线上。然而，确定输入元素填充剩余空间的理想宽度可能具有挑战性。

问题：

标准方法，使用 width: auto;，结果输入元素的静态宽度。或者，宽度：100%；将输入移动到新行。

解决方案：

要实现所需的对齐方式，请考虑以下 CSS 技术：

选项 1：浮动标签和溢出

HTML:

<code class="html"><label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span></code>

CSS:

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

此方法利用溢出：隐藏属性通过防止换行来将输入元素与标签对齐。

选项 2：表格显示

HTML:

<code class="html"><div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div></code>

CSS:

<code class="css">.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}</code>

此方法利用 display: table 属性创建类似表格的布局，其中标签具有固定宽度，输入元素会扩展以填充剩余空间。

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