CSS案例：实现京东搜索框-马育民老师

# 说明

实现下图效果

[![](/upload/0/0/1IX5TKdYnJqd.jpg)](/upload/0/0/1IX5TKdYnJqd.jpg)

### 分析

[![](/upload/0/0/1IX5TKe0sj5g.png)](/upload/0/0/1IX5TKe0sj5g.png)

#### 难点

由于 css 的 基线对齐方式，会影响 输入框、照相机、按钮 的垂直对齐，所以，为了正常显示，不互相影响，让 `button`、`input`、`span` 脱离文档流

脱离文档流的方式：

- 设置浮动
- 使用 **绝对定位**，其父标签要设置 **相对定位**

### 代码

css：

```
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.search_box{
		width: 546px;
		height: 32px;
		border: 2px solid #e2231a;
		position: relative;
	}
	.search_box > input{
		width: 425px;
		height: 26px;
		border: 0;
		padding: 2px 16.5px 2px 17px;
		/* 输入框获取焦点时，外边框不变色 */
		outline: none;
		position: absolute;
		top: 0px;
	}
	.pic{
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url(img/pic.png);
		background-size: 20px 20px;
		position: absolute;
		right: 75px;
		top: 6px;
	}
	.search_box a{
		text-decoration: none;
	}
	.search_box button{
		width: 58px;
		height: 32px;
		background-color: #e1251b;
		border: 0px;
		position: absolute;
		right: 0px;
	}
	/* 鼠标浮动按钮的样式 */
	.search_box button:hover{
		background-color: #c81623;
		cursor: pointer;
	}
	/* 放大镜样式 */
	.fdj{
		display: inline-block;
		width: 21px;
		height: 21px;
		background-image: url(img/fdj.png);
		background-size: 20px 20px;
	}
</style>
```

html：
```
<div class="search_box">
	<input type="text">
	<a href="#"><span class="pic"></span></a>
	<button>
		<i class="fdj"></i>
	</button>
</div>
```

原文出处：http://malaoshi.top/show_1IX5TKeygyij.html