在网页表单开发中，输入框的排列布局是提升用户体验的重要环节，合理的排列能让表单看起来更规整，用户填写时也更顺畅。不同的场景需要选择不同的CSS布局技巧来实现输入框的排列效果。
基础排列技巧
使用flex布局实现横向排列
flex布局是目前实现输入框横向排列最常用的方案，通过设置容器为flex布局，可以轻松控制输入框的对齐方式和间距。
/* 表单容器样式 */
.form-container {
display: flex;
/* 控制输入框之间的间距 */
gap: 16px;
/* 垂直方向居中对齐 */
align-items: center;
/* 换行设置，空间不足时自动换行 */
flex-wrap: wrap;
}
/* 输入框样式 */
.form-input {
/* 设置输入框基础宽度 */
width: 200px;
height: 36px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
对应的HTML结构如下：
<div class="form-container">
<input type="text" class="form-input" placeholder="请输入姓名">
<input type="tel" class="form-input" placeholder="请输入手机号">
<input type="email" class="form-input" placeholder="请输入邮箱">
</div>
纵向排列的对齐技巧
当输入框需要纵向排列时，通常需要保证输入框左对齐，同时标签和输入框的对应关系清晰。可以通过设置固定宽度的标签，配合flex布局实现对齐。
/* 纵向表单容器 */
.vertical-form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* 单个表单项容器 */
.form-item {
display: flex;
align-items: center;
}
/* 输入框标签样式 */
.form-label {
width: 80px;
text-align: right;
margin-right: 12px;
font-size: 14px;
color: #333;
}
/* 输入框样式 */
.vertical-input {
flex: 1;
height: 36px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
对应的HTML结构：
<div class="vertical-form">
<div class="form-item">
<label class="form-label">姓名：</label>
<input type="text" class="vertical-input" placeholder="请输入姓名">
</div>
<div class="form-item">
<label class="form-label">手机号：</label>
<input type="tel" class="vertical-input" placeholder="请输入手机号">
</div>
</div>
进阶排列技巧
使用grid布局实现复杂排列
当表单输入框需要多列不规则排列时，grid布局能更灵活地控制每个输入框的位置和大小。
/* grid布局容器 */
.grid-form {
display: grid;
/* 定义两列，第一列宽度80px，第二列自适应 */
grid-template-columns: 80px 1fr;
/* 定义行间距和列间距 */
gap: 12px 16px;
align-items: center;
}
/* 标签样式 */
.grid-label {
text-align: right;
font-size: 14px;
color: #333;
}
/* 输入框占据整列 */
.grid-input {
height: 36px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
/* 让某个输入框占据两列 */
.grid-input-full {
grid-column: 1 / 3;
}
对应的HTML结构：
<div class="grid-form">
<label class="grid-label">姓名：</label>
<input type="text" class="grid-input" placeholder="请输入姓名">
<label class="grid-label">地址：</label>
<input type="text" class="grid-input grid-input-full" placeholder="请输入详细地址">
</div>
响应式排列适配
在移动端场景下，横向排列的输入框需要自动切换为纵向排列，可以通过媒体查询配合flex布局的flex-direction属性实现。
.responsive-form {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.responsive-input {
width: 200px;
height: 36px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
/* 屏幕宽度小于768px时切换为纵向排列 */
@media (max-width: 768px) {
.responsive-form {
flex-direction: column;
align-items: flex-start;
}
.responsive-input {
width: 100%;
}
}
常见问题处理
在布局输入框时，经常会遇到输入框高度不一致导致对齐错乱的问题，可以通过统一设置输入框的box-sizing: border-box属性，让padding和border的宽度计算在设置的width和height内，避免尺寸偏差。
/* 统一设置盒模型 */
input[type="text"],
input[type="tel"],
input[type="email"] {
box-sizing: border-box;
}
另外，当输入框有验证提示信息时，需要预留提示信息的空间，避免提示出现时输入框位置偏移，可以在输入框容器设置相对定位，提示信息使用绝对定位，不会影响其他输入框的排列。