搜索框input 和图标结合 实现的几种思路

一、淘宝

外层div作出框效果

内层input没框

搜索icon用position定位到左边

右边直接接一个div放相机icon

搜索框是接一个button

 

二、花瓣

input自己的框

外层form不设置宽高，通过

display: inline-block;
position: relative;

搜索icon用position定位

 

三、百度

和花瓣差不多

icon是个<span>

用padding来控制输入显示区域

 

四、absolute定位下居中的几种方法

居中：

position: absolute;

left: 0;

right: 0;

 

/*

left: 50%;

transform: tanslatex(-50%);

*/

 

/*

left: 50%;

transform: tanslatex(-50%);

*/

 

/*

left: 50%;

margin-left: -50%;

*/