什麼是元素的問題對齊

enter image description here

，你看，我不能將它們排列在所有。

真正的問題是，我不能在所有瀏覽器中對齊。例如：我必須把2px top in chrome和3px top in ff

我怎麼能做到這一點：

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>

來源

2013-05-06 Pooya

您可以創建一個小提琴？ – 2013-05-06 11:29:55

我編輯我的問題 – Pooya 2013-05-06 11:38:21

看到我的答案。這對我來說可以。 – 2013-05-06 11:46:04

看到這裏是更新的Link to jsfiddle。

這可能會解決您的問題，爲每個瀏覽器。

的變化是：

.home_kadr{ 
display:inline-block; 
} 

.home_search { 
float:left; 
}

來源

2013-05-06 11:45:39

浮動文本字段和提交按鈕以對齊它們。

來源

2013-05-06 11:29:08 drip

進行以下更改CSS：

.home_search { 
    float: right; 
} 

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

最後添加以下元素的<div class="home_kadr">最後一個子：

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

來源

2013-05-06 12:01:27

什麼是元素的問題對齊

回答

相關問題