Html 元素对齐有什么问题

我正在尝试制作一个如下的搜索框：

如你所见，我根本无法将它们对齐

真正的问题是，我无法在所有浏览器中设置对齐。例如：我必须在chrome中放置

2px top

，在ff中放置

3px top

我如何做到这一点：

这是

css:

html:

جستجو

浮动文本字段和“提交”按钮，以便对齐它们。

请参见此处的更新内容

这可能会解决每个浏览器的问题

变化如下：

 .home_kadr{
 display:inline-block;
 }

 .home_search {
 float:left;
 }

---

对css进行以下更改：

.home_search {
  float: right;
}

.home_btn {
  /* display: inline-block; */
  float: right;
}

最后添加以下元素作为

的最后一个子元素：

你能做一把小提琴吗？看我的答案。这对我来说很好。

 .home_kadr{
 display:inline-block;
 }

 .home_search {
 float:left;
 }

.home_search {
  float: right;
}

.home_btn {
  /* display: inline-block; */
  float: right;
}

<div style="clear: both; "></div>