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

这里是更新的 Link to jsfiddle .

这可能会解决所有浏览器的问题。

变化是:

 .home_kadr{
 display:inline-block;
 }

 .home_search {
 float:left;
 }