<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;
}
最终效果