如何在谷歌高级搜索页面中垂直对齐4个文本输入框？

问题 #

已完成谷歌高级搜索页面制作，功能符合预期，但无法通过CSS让4个空白文本输入框在文字右侧垂直堆叠对齐，能移动输入框但始终无法对齐，推测是CSS问题。

解决方案 #

问题核心是每个<label>标签宽度不一致，导致输入框起始位置混乱。通过以下CSS调整可实现对齐：

修改后的完整CSS代码 #

.advanced h1 {
    margin-left: 50px;
    margin-top: 50px;
    color: maroon;
    font-size: 24px;
}

.advanced img {
    margin-left: 10px;
    margin-top: 10px;
    width: 300px;
    height: 100px;
}

.finder {
    color: black;
    font-size: 18px;
    margin-top: 30px;
    margin-left: 50px;
    margin-bottom: 20px;
}

hr {
    margin-top: 20px;
}

.field {
    margin-left: 50px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.field label {
    min-width: 230px;
    text-align: left;
}

.field input.textinput {
    flex: 1;
    max-width: 550px;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

.field input.textinput1,
.field input.textinput2 {
    width: 130px;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

.field .seperator {
    margin: 0 10px;
}

.advancedbtn input {
    margin-left: 700px;
    margin-top: 100px;
    background-color: #4d90fe;
    color: white;
    border: none;
    padding: 8px 18px;
    cursor: pointer;
}

关键调整说明 #

• 给.field label设置min-width：统一所有标签宽度，确保输入框起始位置一致
• 添加align-items: center：让标签和输入框垂直居中对齐，视觉更协调
• 给输入框设置flex:1+max-width：既让输入框自适应剩余空间，又避免宽度过宽
• 增加gap：优化标签与输入框的间距，提升页面美观度

原HTML结构无需修改，仅替换CSS即可实现输入框垂直对齐效果。

内容的提问来源于stack exchange，提问作者triplikeido