搜索框 - div中input自适应
2015-08-25 11:29
579 查看
![](http://static.oschina.net/uploads/space/2015/0825/112053_Dm9K_1250113.png)
当需要开发如上这样一个搜索框时。
因为是移动端开发,手机屏幕宽度的不确定性,所以不能使用平时的定宽开发。
![](http://static.oschina.net/uploads/space/2015/0825/112310_BvtS_1250113.png)
分析如上图:
1.该搜索框由两部分组成:input搜索框+取消按钮;
2.搜索框距离左右两边的距离是固定的,即图中1和2相等;
3.取消按钮的大小是固定的,以及距离input距离是固定的;
4.input随着屏幕宽度的变化自适应变化。
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜索框 - div中input自适应</title> <style> *{ 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; } </style> </head> <body> <!--设置整体布局--> <div> <!--input包裹层,利用块元素的特性(width:100%)使其可以完全填充父级div,使用margin-right在右边留出固定宽度--> <div> <!--使input完整填充input包裹层,同时设置其padding值,用以存放搜索小图标+页面优化--> <input type="text" placeholder="搜索"/> </div> <!--btn包裹层,可有可无,使用position将其放置在input右边固定位置,利用z-index使得图层不会被覆盖--> <div> <span>取消</span> </div> </div> </body> </html>
相关文章推荐
- Android之获取手机上的图片和视频缩略图thumbnails
- [div+css]晒晒最新制作专题推广页模板
- html小技巧之td,div标签里内容不换行
- div flash firefox div层总是被flash层遮盖
- jQuery根据ID获取input、checkbox、radio、select的示例
- 小技巧处理div内容溢出
- 让超出DIV宽度范围的文字自动显示省略号...
- 解决div被flash挡住的设置方法
- css样式之区分input是按钮还是文本框的方法第1/4页
- 网页中Span和Div的区别
- DIV+CSS经常用到的属性、参数及说明
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
- DIV CSS网页布局 最小高度(min-height)的妙用
- DIV border边框显示不完全问题的解决方法
- jQuery操作input值的各种方法总结
- 控制input的CSS但不影响CheckBox以及Radio的样式
- js+css使文本框自动适应内容的高度
- Div CSS absolute与relative的区别小结
- 图片垂直居中之姊妹 DIV垂直居中
- js禁用和激活input表单的方法