如何对齐文字框和图象(image)按钮完成3点1线

1个文字框周围1个按钮是很常常用到的网页页面內容，例如检索框这些，而假如周围的按钮应用图象的话，她们垂直方位就很不可易对齐，即便应用 vertical-align、padding和margin等都不好（非常是在IE中，Firefox中应用vertical-align还能够）。

比如有以下编码：

其实际效果是：

处理计划方案十分简易，上述编码改动为：  

这时候，在Firefox和IE中的实际效果各自是： 

能够看到，在Firefox中，假如事前做好的图象和文字框的高宽比彻底1致，那末她们就会彻底对齐了；而在IE中，则按钮图象比文字框高1个像素。

因而能够对于IE访问器稍作调剂： 

留意，这里在”margin-top”特性前面有1个加号，针对Firefox访问器，这个特性设定就失效了；而针对IE访问器，会忽视掉这个加号，因而对于IE访问器，上面就会存在这1像素的margin了。在这时候，在Firefox和IE中的实际效果各自是：

到这里，在垂直方位经对齐得很好了，水平方位上，在Firefox和IE中，还略有差别，在Firefox中2者紧靠在1起，在IE中，2者之间有1点点间距。可是水平方位的操纵就非常容易多了，这里就已不细调剂了，读者能够自身实验1下。

=================开心的切分线==============

1个简易而雅致很多的方式处理这个难题，十分功能强大，方式是对必须对齐的input元素应用 vertical-align 特性例如：