Html 搜索栏和搜索按钮不是'；他身高不一样

我正在做一个搜索栏，放在一个网站上。这是谷歌搜索栏的代码

.search{
显示：内联块；
高度：自动；
宽度：100%；
位置：粘性；
顶部：10vh；
垫底：2.5vh；
}
输入[类型=文本]，选择{
宽度：50vw；
填充：2vh 4vh；
利润率：1vh 0.5；
显示：内联块；
边界：固体0.5vh#000000；
边界半径：2vh；
框大小：边框框；
垂直对齐：底部对齐；
}
.按钮{
最小宽度：5vw；
填充：2vh 4vh；
利润率：1vh 0.5；
显示：内联块；
边界：固体0.5vh#000000；
边界半径：2vh；
框大小：边框框；
颜色：#000000；
背景色：#ffffff；
文本对齐：居中；
文字装饰：无；
字体大小：16px；
光标：指针；
垂直对齐：底部对齐；
}

在

.searchform

元素上尝试

显示：flex

。这是因为子项继承了默认属性，即在行中显示、不换行和拉伸以适应。（我知道我知道！）

它可能没有你希望的那么优雅，因为你必须给你的搜索栏留出一点空白来获得间距

.searchform{
显示器：flex；
}
.搜索{
显示：内联块；
高度：自动；
宽度：100%；
位置：粘性；
顶部：10vh；
垫底：2.5vh；
}
输入[类型=文本]，选择{
宽度：50vw；
填充：2vh 4vh；
利润率：1vh 0.5；
显示：内联块；
边界：固体0.5vh#000000；
边界半径：2vh；
框大小：边框框；
垂直对齐：底部对齐；
右边距：5px；
}
.按钮{
最小宽度：5vw；
填充：2vh 4vh；
利润率：1vh 0.5；
显示：内联块；
边界：固体0.5vh#000000；
边界半径：2vh；
框大小：边框框；
颜色：#000000；
背景色：#ffffff；
文本对齐：居中；
文字装饰：无；
字体大小：16px；
光标：指针；
垂直对齐：底部对齐；
}

方法1） 为

输入[type=text]

插入

字体大小：16px

（按钮的字体大小相同），如下所示：

input[type=text], select {
    font-size: 16px;
   //Other codes...
}

.search{
显示：内联块；
高度：自动；
宽度：100%；
位置：粘性；
顶部：10vh；
垫底：2.5vh；
}
输入[类型=文本]，选择{
宽度：50vw；
填充：2vh 4vh；
利润率：1vh 0.5；
显示：内联块；
边界：固体0.5vh#000000；
字体大小：16px；
框大小：边框框；
垂直对齐：底部对齐；
}
.按钮{
最小宽度：5vw；
填充：2vh 4vh；
利润率：1vh 0.5；
显示：内联块；
边界：固体0.5vh#000000；
框大小：边框框；
颜色：#000000；
背景色：#ffffff；
文本对齐：居中；
文字装饰：无；
字体大小：16px；
光标：指针；
垂直对齐：底部对齐；
}

---

这样可以，但我必须再次将搜索栏居中。更改文本输入的字体大小似乎效果更好，更改更少。不过谢谢你：）