当我使用图像作为表单输入提交按钮时，表单图像会转到新行。如何使该图像与表单输入提交按钮保持在同一行？这是我的表格：
<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块；在css中，但即使这样也无济于事。。如有任何帮助，我们将不胜感激。
我猜某个父元素有一个您遇到的宽度集。你可以：
- 使包裹元素更宽
- 缩小图像
- 在父元素上设置
white-space:nowrap
元素本身中没有任何东西导致它被包裹。
将display: inline-block;放入voteform CSS
使用CSS属性：display: inline-block;，它不会转到下一行。如果它应该在不在<form>标记内的元素的行中，则还应该将此属性应用于CSS中的表单元素。
我倾向于在元素上使用背景图像，并使用：hover作为鼠标悬停。我认为这比使用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'); }