Html 不排队

我的搜索按钮将与我的搜索栏不对齐。谁能帮我找出原因吗。我已经尝试了我知道怎么做的一切。我也问过别人，似乎没人能帮我。我相信这是一个简单的解决办法，只是我是新的，不能找出它在所有。谢谢你的帮助

.tftput4{
背景：#ffffff；
边框顶部：2个实心#e4；
左边框：2px实心#e4；
边框底部：2个实心#e4；
右边框：0px实心#e4；
边框左下半径：50px；
边框左上半径：50px；
颜色：#000000；
浮动：中心；
字号：21px；
字体大小：400；
高度：45px；
边缘顶端：40px；
填充：10px 5px；
文本缩进：10px；
宽度：700px；
}
.TF按钮4{
背景：白色url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png)左中无重复；
背景色：#ffffff；
背景位置：10px；
边框顶部：2个实心#e4；
左边框：0px实心#e4；
边框底部：2个实心#e4；
右边框：2px实心#e4；
边框右下半径：50px；
边框右上角半径：50px；
颜色：#ffffff；
光标：指针；
字体大小：400；
高度：69px；
左边距：-4px；
文本对齐：居中；
文字装饰：无；
宽度：45px；
}
.tfbutton4:悬停{
背景：白色url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png)左中无重复；
背景色：#ffffff；
背景位置：10px；
边框顶部：2个实心#e4；
左边框：0px实心#e4；
边框底部：2个实心#e4；
右边框：2px实心#e4；
边框右下半径：50px；
边框右上角半径：50px；
颜色：#ffffff；
光标：指针；
字体大小：400；
高度：69px；
左边距：-4px；
文本对齐：居中；
文字装饰：无；
宽度：45px；
}
.tfclear{
明确：两者皆有；
}

有两个原因导致你没有得到你所期望的

您的提交按钮不像搜索字段那样有
页边距顶部
因为两个（
输入
）都是
内联块
类型的
显示
元素。它们需要
垂直对齐
才能与
中间对齐
这样做可以解决您的问题。

片段：

.tftput4{
背景：#ffffff；
边框顶部：2个实心#e4；
左边框：2px实心#e4；
边框底部：2个实心#e4；
右边框：0px实心#e4；
边框左下半径：50px；
边框左上半径：50px；
颜色：#000000；
/*浮动：居中；删除此项，因为它无效*/
字号：21px；
字体大小：400；
高度：45px；
边缘顶端：40px；
填充：10px 5px；
文本缩进：10px；
宽度：700px；
最大宽度：calc（100%-57px）；/*添加了此值，因此它永远不会超过100%*/
垂直对齐：中间；/*添加了此行*/
}
.TF按钮4{
背景：白色url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png)左中无重复；
背景色：#ffffff；
背景位置：10px；
边框顶部：2个实心#e4；
左边框：0px实心#e4；
边框底部：2个实心#e4；
右边框：2px实心#e4；
边框右下半径：50px；
边框右上角半径：50px；
颜色：#ffffff；
光标：指针；
字体大小：400；
高度：69px；
左边距：-4px；
文本对齐：居中；
文字装饰：无；
宽度：45px；
页边距顶部：40px；/*添加了此行*/
垂直对齐：中间；/*添加了此行*/
}
.tfbutton4:悬停{
背景：白色url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png)左中无重复；
背景色：#ffffff；
背景位置：10px；
边框顶部：2个实心#e4；
左边框：0px实心#e4；
边框底部：2个实心#e4；
右边框：2px实心#e4；
边框右下半径：50px；
边框右上角半径：50px；
颜色：#ffffff；
光标：指针；
字体大小：400；
高度：69px；
左边距：-4px；
文本对齐：居中；
文字装饰：无；
宽度：45px；
}
.tfclear{
明确：两者皆有；
}
你说的“不排队”是什么意思？你想把它和什么联系起来？您是否试图在一行中获取所有内容？首先没有像
float:center
…这样的属性。