如何对齐文本框和旁边的图像按钮

一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐，即使使用 vertical-align、padding和margin等都不行（特别是在IE中，Firefox中使用vertical-align还可以）。

例如有如下代码：

<form>



  <input type="text" name="foo" value="Test Field"/>



  <input type="image" src="images/button.gif" />



</form>

其效果是：

我写的代码：

#search form{
    width:250px;
    height:25px;
    line-height:25px;
    display:in-line;
    background:black;
    }
#search form input[type="text"]{
    border: 1px solid rgb(143,201,255);
    width: 160px;
    height: 22px;
    line-height:22px;
    margin-top:1px;
    _margin-top:-3px;
    margin-right:5px;
    background-color: rgb(229, 242, 255);
    color: #000;
    background:green;
    }
#search form input[type="image"]{
    width:64px;
    height:30px;
    position:absolute;
    margin-top:-2px;
    +margin-top:4px;
    margin-right:4px;
    background:yellow;
    }

 

这种方法在火狐下对齐了，但是IE下面没有。还是没有对齐。

水平方向上，在Firefox和IE中，还略有区别，在Firefox中二者紧靠在一起，在IE中，二者之间有一点点间隔。但是水平方向的控制就容易多了

 

在网上搜，找到第二种方案：

 

对需要对齐的input元素使用 vertical-align 属性比如：

.nav_r img,.nav_r input,.nav_r select{vertical-align:middle;}

这样确实对得很齐。

 

试验了一下，代码改成如下：

#search form{
    width:250px;
    height:25px;
    line-height:25px;
    display:in-line;
    background:black;
    }

#search form input {
    vertical-align:middle;

}

终于对齐了。

My God!

第二种方法里面#search form input 就不用加限定符了，比如不能写成#search form input["text"]这样了，这样反而不能对齐。