1

次のような検索ボックスを作成しようとしています。

ここに画像の説明を入力

ご覧のとおり、それらをまったく整列させることはできません。

本当の問題は、すべてのブラウザーで整列を設定できないことです。例：私は入れなければなりませ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>
4

3 に答える 3

1

こちらをご覧くださいjsfiddle への更新されたリンクです。

これは、すべてのブラウザーの問題を解決する可能性があります。

変更点は次のとおりです。

 .home_kadr{
 display:inline-block;
 }

 .home_search {
 float:left;
 }
于 2013-05-06T11:45:39.907 に答える