フォーム入力イメージが新しい行に移動する

Question

イメージをフォーム入力送信ボタンとして使用すると、フォームイメージが新しい行に移動します。そのイメージをフォーム入力サブミットボタンと同じ行に残すにはどうしたらいいですか？ここに私のフォームです：

これはとにかくCSSを使って解決するにはありますか？ ありがとうございます。

編集：私はdisplay：inline-blockを使ってみました。しかし、それは助けにはならなかった。どんな助けも高く評価されるだろう。

Answer 1

CSSプロパティの場合：display: inline-block;次の行には移動しません。 <form>タグ内にない要素の行に含める必要がある場合は、CSSのフォーム要素にもこのプロパティを適用する必要があります。

Answer 2

私はいくつかの親要素にあなたが突っ込んでいる幅が設定されていると思います。あなたは可能性：何もそれがラップする原因となっている要素そのものではありません

親要素に

1. ラッピング要素を作成し、より広い
3. 画像を小さく作るにはwhite-space:nowrapを設定します。

Answer 3

は、私は要素に背景画像を使用する傾向があり、そして使用するvoteformのCSS

Answer 4

にdisplay: inline-block;を置く：あなたのマウスオーバーのために置きます。私はこれがJavaScriptを使った画像交換よりもきれいだと思う。そして入力はあなたが期待しているようにインラインブロックになります。

<!-- html --> 
​<form action="whatever.php" method="post"> 
<input type="submit" value="huh" id="button" /> 
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

/* css */ 
#button { background-image: url('path/to/my/first/image.png'); } 
#button:hover { background-image: url('path/to/my/second/image.png'); }