如何在 Web 表单中水平对齐标签和输入字段？

水平对齐标签和输入元素

增强 Web 表单的美观性需要能够将标签和输入字段并排放置。本指南说明了如何使用 CSS 实现这种水平对齐。

问题：

正如第一篇文章中强调的，有两个主要挑战：

• 确保标签和输入元素占据同一行。
• 将输入字段的宽度扩展到无论标签的长度如何，都填充剩余空间。

解决方案 1：Inline-Block

对标签和输入元素使用 display: inline-block允许它们水平对齐，同时保持各自的尺寸。但是，这可能无法满足填充输入字段剩余宽度的要求。

改进的解决方案：float/overflow Magic

• 创建一个容器标签和输入元素。
• 将标签向左浮动，让输入占据剩余的空间空格。
• 隐藏标签容器上的溢出以防止双行行为。
• 为输入元素设置宽度：100%。

**CSS：

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

解决方案 2： table-cell

另一种有效的方法是将这两个元素都视为表格单元格。

• 创建一个包装容器并将其显示属性设置为表格。
• 将标签指定为显示：表格单元格，宽度：1px和空白：nowrap以防止溢出。
• 设置输入字段显示为：表格单元格，宽度：100%。

**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%
}

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