Как сделать кнопку отправки в соответствии с полями поиска?

Question

У меня есть поле поиска, и я хочу, чтобы изображение моей кнопки поиска совпадало с полями поиска, но это не так. Я использовал теги div, чтобы попытаться переместить его, но он всегда перемещает поля поиска, а не только кнопку!

HELP!

<form action="weezyresults.php" method="post">
  <input type="text" name="search" size="35" value="Job Title e.g. Assistant Manager"  
    style="background-color:white; border: 
    solid 1px #6E6E6E; height: 30px; font-size:18px; 
    vertical-align:9px;color:#bbb" 
    onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value = '';this.style.color='#000'}" />
  <input type="text" name="searchterm" size="35" value="Location e.g. Manchester"   
    style="background-color:white; border: 
    solid 1px #6E6E6E; height: 30px; font-size:18px; 
    vertical-align:9px;color:#bbb" 
    onfocus="if(this.value == 'Location e.g. Manchester'){this.value = '';this.style.color='#000'}" />
  <input type="image" src="but.tiff" alt="Submit" height="30" width="60">
</form>

Спасибо!

Джеймс

Answer 1

Похоже, это для меня. Возможно, у вас есть проблема, потому что вы используете файл TIFF для этой кнопки. Я бы преобразовал это в JPG.

Если ваш не похож на это, возможно, в вашем проекте есть какой-то другой CSS, который нарушает ваш макет.

Answer 2

Попробуйте это

http://jsfiddle.net/TMy6p/

Я переместил ваш стиль во внешнюю таблицу стилей, чтобы привести его в порядок и помочь избежать повторения одинаковых тегов стилей для элементов.1006 *

в основном вам просто нужно плавать элементы и давать им ширину.

Answer 3

Используйте float - например: input {float: left} для каждого элемента, что должно сработать.