input text和button 设置等高却不在同一水平线上

    <div>
    	<input type="text" class="et">
    	<input type="button" class="btn" name="search" value="搜索" >
    </div>

显示效果

接下来给text和button添加一下css效果

/*去除获取焦点后的框*/
.et:focus,
.btn:focus {
	outline: none;
}

.et {
    width: 200px;
	height: 36px;
	line-height: 36px;
	border: 2px solid #ff5000;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	padding-left: 10px;
}

.btn {
	height: 40px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	color: #ffffff;
	font-size: 16px;
	background-color: #ff5000;
	border: none;// 去除点击时出现的框
}

显示效果

可以看到中间有空隙并且上下没有对齐
首先解决如何去掉中间的空隙
给et和btn添加浮动

.et {
	float: left;
}

.btn {
	float: left;
}

或者设置btn的position:absolute;

.btn {
	position: absolute;
}

显示效果

可以看到还是没有对齐，text的下面多出来一块，将margin和padding
设为0

* {
	margin: 0;
	padding: 0;
}

最终效果