html - 元素对齐有什么问题

Question

我正在尝试制作这样的搜索框：

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

真正的问题是，我无法在所有浏览器中设置对齐。例如：我必须把2px top in chrome和3px top in ff

我怎样才能做到这一点：

这是jfiddle

CSS：

.home_kadr { padding:10px; text-align:center;}
.home_search {
    font-size:16px!important;
    font-family:Arial!important;
    font-style:italic!important;
    padding:14px!important;
    border:1px solid #d6bf99!important;
    border-radius:2px!important;
    margin:0px!important;
    /*border-right:none!important;*/
    border-top-right-radius:0px!important;
    border-bottom-right-radius:0px!important;
}
.home_btn {
    width:115px; height:42px;
    background:url(../images/home_search.png);
    display:inline-block;
    font-family:'b koodak';
    font-size:20px;
    padding:8px 8px 0px 8px;
    color:#FFF;
    text-align:center;
    border:none;
}

html:

    <div class="home_kadr">
        <div class="home_btn">جستجو</div><input type="text" name="fld_domainName" id="fld_domainName" class="wd-300 en home_search" />
    </div>

Answer 1

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

Answer 2

请参阅此处是jsfiddle 的更新链接。

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

变化是：

 .home_kadr{
 display:inline-block;
 }

 .home_search {
 float:left;
 }

Answer 3

对css进行以下更改：

.home_search {
  float: right;
}

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

最后添加以下元素作为的最后一个子元素 <div class="home_kadr">：

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