Форма ввода изображения переходит на новую строку

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; в форме голосования CSS

Answer 3

Я бы предпочел использовать фоновое изображение для элемента и использовать: 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'); }

Answer 4

Со свойством CSS: display: inline-block; он не будет переходить к следующей строке.Если он должен находиться в строке элемента, который не находится внутри тега <form>, вам также следует применить это свойство для элемента формы в CSS.