在 HTML 中，通常需要将标签和输入元素放置在同一水平线上。然而，确定输入元素填充剩余空间的理想宽度可能具有挑战性。
问题：
标准方法，使用 width: auto;，结果输入元素的静态宽度。或者，宽度：100%；将输入移动到新行。
解决方案：
要实现所需的对齐方式，请考虑以下 CSS 技术：
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>此方法利用溢出：隐藏属性通过防止换行来将输入元素与标签对齐。
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中文网其他相关文章！
