如何在 CSS 中使用动态宽度水平对齐标签和输入？

使用动态宽度水平对齐标签和输入

在网页设计中，通常需要将标签及其相应的输入元素放置在同一位置线。但是，无论标签文本如何，确保输入元素填充剩余宽度都具有挑战性。

要使用 CSS 实现此目的，请考虑以下技术：

溢出隐藏技术

1. HTML: 使用 label 和 span 元素来包装输入：

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

2. CSS： 在跨度上使用溢出：隐藏属性：

<code class="css">label {
    float: left; /* Align label to the left */
}
span {
    display: block;
    overflow: hidden; /* Key trick for adjusting input width */
    padding: 0 4px 0 6px; /* Add padding for visual consistency */
}
input {
    width: 100%;
}</code>

表格单元格显示技术

1. HTML： 将标签和输入包含在容器 div 中：

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

2. CSS： 利用表格显示和表格单元格属性：

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

这些技术有效地水平对齐标签和输入，同时确保输入元素填充剩余宽度，适应标签文本的长度。

以上是如何在 CSS 中使用动态宽度水平对齐标签和输入？的详细内容。更多信息请关注PHP中文网其他相关文章！