html input自适应,搜索框 - div中input自适应

当需要开发如上这样一个搜索框时。

因为是移动端开发，手机屏幕宽度的不确定性，所以不能使用平时的定宽开发。

分析如上图：

1.该搜索框由两部分组成：input搜索框+取消按钮；

2.搜索框距离左右两边的距离是固定的，即图中1和2相等；

3.取消按钮的大小是固定的，以及距离input距离是固定的；

4.input随着屏幕宽度的变化自适应变化。

代码：

html>

搜索框 - div中input自适应

*{

margin:0;

padding:0;

}

.search{

position: relative;

height: 32px;

border-bottom:1px solid #d3d3d3;

overflow:hidden;

background: #fff;

text-align: center;

overflow:hidden;

padding:4px 20px;

}

.search_bar{

height: 32px;

margin-right:92px;

}

.search_bar>input{

width:100%;

display:inline-block;

*display:inline;

border:1px solid #ccc;

border-radius:5px;

font-size:14px;

height:30px;

padding:0 10px 0 32px;

background: #f0f0f0 url(/images/webapp/icon.png) no-repeat;

background-size:32px 32px;

}

.search_btn>span{

position:absolute;

top:4px;

right:20px;

z-index:9;

line-height:32px;

color:green;

}

取消