什么是元素的问题对齐

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

什么是元素的问题对齐

回答

相关问题