html - 画像を送信ボタンとしたフォームテキスト入力(input type="image")で、ボタンの位置がずれている

Question

HTML:

<form action="search.php" method="GET">
    <input type="text" name="q" value="Search for an item..." width="150" style="border: solid 1px black; padding: 3px;" />
    <input type="image" src="images/search_icon.png" style="width: 24px; height="30px;" /> 
</form>

私が得るもの：

ところで、ボタンだけにパディングを使用しようとすると、フォーム全体が下に移動します。

Answer 1

入力の vertical-align プロパティを middle に設定してみてください。

input {
    vertical-align: middle;
}

jsFiddle の例。