Input搜索框与搜索图标对齐解决方法

出现的情况

有些网站需要在搜索框旁写一个紧挨着的放大镜图标框。这时候可能就牵涉到对齐问题。

例如小米商城搜索框：

可以简单写一下这两个框：

        <div class="header-search"><input class="first" type="text" placeholder="冰箱"><a href="#javascript:;"><input class="last iconfont" type="submit" value=""><!-- &#xe609是已经引入了图标字体 --></a></div>

简单写下样式：

    .header-search{width: 296px;height: 50px;}.header-search>.first{width: 217px;height: 50px;}.header-search>a>.last{width: 52px;height: 50px;/* 如果需要扩大放大镜图标 */font-size: 24px;}

不放大图标时：

放大图标时：

可以看到使用font-size:属性放大图标，第二个input框会出现偏移无法对齐的情况。

解决方法一：

给放大镜的input添加vertical-align: middle;属性。

    .header-search>a>.last{width: 52px;height: 50px;font-size: 24px;/* 如果需要扩大放大镜图标 */vertical-align: middle;}

此时两个框中间的三像素问题，可以通过给外层div盒子font-size:0;等方式来解决。

    .header-search{width: 296px;height: 50px;float: right;font-size: 0; }

边框重合可以通过取消任意一边重合的边框即可。

例：

    .header-search>a>.last{width: 52px;height: 50px;font-size: 24px;/* 如果需要扩大放大镜图标 */border-left: none;/* 取消左侧边框 */}

如果采用了方法一，出现了input框内文字不显示的问题，可能是fon-size:0;属性继承的问题。需要给其单独设置font-size

解决方法二：

可以使用绝对定位来解决

给外层div添加相对定位：

 .header-search{width: 296px;height: 50px;position: relative;}

给两个input添加绝对定位，其中放大镜图标框使用添加right:0;

    .header-search>.first{width: 217px;height: 48px;position: absolute;}.header-search>a>.last{width: 52px;height: 50px;font-size: 24px;/* 如果需要扩大放大镜图标 */position: absolute;right: 0;/* 让放大镜框靠右 */}

对于可能出现的间隙或者重叠问题：

1. 可以选择通过调整外层div的宽度解决：

  .header-search{width: 270px;/* 可以直接计算两个框的宽度及边框相加，减去重合的一边边框 */height: 50px;position: relative;}

2. 可以通过调整两个input框的相对定位来始两者贴合。

    .header-search>.frame{width: 217px;height: 48px;position: absolute;left: 26px;}

注意：以上演示均设置了1px边框。

如果采用了方法一，出现了input框内文字不显示的问题，可能是fon-size:0;属性继承的问题。需要给其单独设置font-size