如何使提交按钮符合搜索字段？

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

使用浮点数 - 例如：在每个元素上输入{float：left}，这应该可以解决问题。

Answer 3

试试这个

http://jsfiddle.net/TMy6p/

我已将您的样式移动到外部样式表中以稍微整理一下，并帮助您避免在元素上重复相同的样式标记。

基本上你只需要浮动元素并给它们宽度。