0

いくつかの画像を利用するカスタム フォーム入力を作成しようとしています。次のようになります。 ここに画像の説明を入力

私は次のことを試しました：

<style>
input {
    background-image: url(../img/search-background-middle.png);
    background-repeat: repeat-x;
    padding: 17px 0;
    font-size: 12px;
    border: none;
    margin: 0;
}

form {
    padding: 0;
    margin: 0;
}
</style>

<body>
<form>
    <img src="../img/search-background-left.png"/>
    <input type="text" value="   start typing to search..." size="40" maxlength="255"         />
    <img src="../img/search-background-right.png"/>
</form>
</body>

結果は次のとおりです。

ここに画像の説明を入力

どうして？？私は解決策だけでなく、これがうまくいかない理由にも興味があります。隣り合わせに配置されたインライン要素についての私の理解には欠陥があると思います。

4

3 に答える 3

1

フロートを追加する必要がある場合もあります：left！important; 入力に。物事が整列していないときに時々それは私の問題を修正します

于 2012-06-24T02:01:40.273 に答える
1

vertical-align を top に設定してみてください

form * {vertical-align:top;}

imgs と の間のスペースも削除します。input

于 2012-06-23T23:59:36.357 に答える
1
  1. imgとinput要素の間の空白を削除します (改行を含む)
  2. input画像の高さに合わせて要素の高さと行の高さを設定します
  3. でパディングとマージンを 0 に設定しますinput。
于 2012-06-24T00:00:14.867 に答える