表单输入图像转到新行

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

我猜想有些父元素的宽度设置是你要碰到的。你可以：

1. 使包裹元素更宽
2. 缩小图片
3. 在父元素
上设置white-space:nowrap

元素本身没有任何东西导致它包裹。

Answer 2

将display: inline-block;放入voteform CSS

Answer 3

使用CSS属性：display: inline-block;它不会转到下一行。 如果它应该在不在<form>标记内的元素行中，则还应该将此属性应用于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'); }