0

次の検索ボックスの画像を用意します。

ここに画像の説明を入力してください

次のコードとcssを使用します。

#searchcontainer {
margin: 40px 0 0 0; 
}

.search {
    float: right;
    margin: 0;
    padding: 0;
    height: 21px;   
    width: 310px;

}
.search input,
.search button {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    color: #A7A9AC;
    border: 0;
    outline: none;
}

.search input.box {
    margin: 0;
    padding: 2px 5px 0 5px;
    width:230px;
    height: 19px;
    background: #FFF url(images/search.gif) no-repeat top left;
}

.search input.btn {
    margin: 0 0 0 -5px;
    padding: 0;
    width:70px;
    height: 21px;
    cursor:pointer;
    cursor: hand; /* cross browser */
    text-indent: -9999px;
    background: #FFF url(images/search.gif) no-repeat top right;
}


<div id="searchcontainer">
          <form id="searchform" class="search" method="post" action="#">
            <input name="box" type="text" value="zoek..." class="box" />
            <input name="btn" type="button" class="btn" />
          </form>
        </div>

Firefoxでは問題ないように見えますが、ieとchromeでは「Zoek」ボタンが少し下がっています。画像を参照してください。

ここに画像の説明を入力してください

私の意見では、cssは大丈夫です。しかし、どこがうまくいかないのかわかりません。

4

1 に答える 1

1

floatプロパティを追加すると機能します。

.search input.btn {
    width:70px;
    height: 19px;
    position: relative;
    float: left;
    cursor:pointer;
    display: inline-block;
    cursor: hand; /* cross browser */
    background: #DDDDDD url(images/search.gif) no-repeat top right;
}

編集：

例

于 2012-06-02T10:26:14.857 に答える