表单输入对齐问题（HTML/CSS） 背景：

我对HTML/CSS比较陌生，一直负责为公司网站创建搜索表单。我所有的实际代码都运行得很好，但困扰我的是一个简单的风格问题。在搜索表单中，文本输入字段和按钮输入字段没有很好地垂直对齐，我无法让它们通过CSS进行协作。我希望他们俩的高度和水平都一样。有什么建议吗？谢谢大家!

代码：

#srchContainer{
宽度：70%；
身高：100%；
边界：0px；
保证金：0自动；
填充：0；
}
#搜索表单{
文本对齐：居中；
保证金：20px自动；
填充：0；
宽度：100%；
垂直对齐：顶部；
}
#搜索输入框{
宽度：60%；
高度：31px；
边框：1px实心#717171；
字号：1.5em；
保证金：0；
填充：0 5px；
显示：内联；
}
#srchBtn{
高度：32px；
左边距：2倍；
边际上限：0；
页边距底部：0；
左侧填充：6px；
右边填充：6px；
垫底：0px；
垫面：1px；
显示：内联；
}
.btn{
颜色：#717171；
边界半径：0px；
左侧填充：6px；
右边填充：6px；
垫底：1px；
垫面：1px；
边框：1px实心#717171；
左边距：2倍；
右边距：2px；
边际上限：0px；
边缘底部：2px；
高度：20px；
}
.btn:悬停，
.btn2：悬停{
背景色：#717171；
颜色：白色；
}

应用

垂直对齐：中间编码到两个输入元素。
您可以使用CSS轻松地在对齐中工作

请参阅以下链接以检查

下面是一个简单的例子：


.navbar{
显示器：flex；
}
.导航栏输入{
弹性：1；
}
.导航栏按钮{
边框：1px实心#aaa；
左边距：3倍；
}

搜索
值得注意的是，问题的根本原因是文本输入设置的字体大小。令人惊讶的是，忽略如此简单的内容是多么容易。我尝试在父元素上使用它，但没有在输入本身上使用它。非常感谢你！