表單輸入圖像更換爲新行

Question

當我使用圖像作爲表單輸入提交按鈕時，表單圖像將更換一行。我怎樣才能讓圖像保持與表單輸入提交按鈕在同一行？這裏是我的形式：

<form id="voteform" name="voteform" method="POST"> 
<input type="hidden" name="id" id="id" value="<?php echo $id;?>"> 
<INPUT TYPE="image" class="voteform" src="images/vote.png" style="float: left;" name='vote' ALT="Submit Form" onMouseOver="this.src='images/vote_link.png'" 
    onMouseOut="this.src='images/vote.png'" width="35" height="20" title="Click to Vote!"></form> 

有無論如何解決這個使用CSS或什麼？ 謝謝。

編輯：我試過使用display：inline-block;在CSS中，但即使這沒有幫助..任何幫助將不勝感激。

Answer 1

使用CSS屬性：display: inline-block;它不會轉到下一行。 如果它應該位於不在<form>標記內的元素的行中，則還應該將此屬性應用於CSS中的表單元素。

Answer 2

我猜想一些父元素有一個寬度設置，你碰到了。你可以：

1. 使纏繞元件廣泛
2. 縮小圖像
3. 設置white-space:nowrap父元素

上有沒有什麼元素本身就是造成它來包裝。

Answer 3

把display: inline-block;在voteform CSS

Answer 4

我會傾向於在元件上使用背景圖片，並使用：懸停鼠標懸停的。我認爲這比使用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'); }