<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
500px;
height: 300px;
background: burlywood;
font-size: 0;
}
.same {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 0;
height: 30px;
}
.div {
300px;
height: 32px;
border: solid 1px #000000;
}
.text {
80%;
background-color: rgba(147, 147, 147, 0.44);
outline: none;
float: left;
}
.btn {
20%;
background-color: #59b3f3;
}
/**/
</style>
</head>
<body>
<div>
<!--清除text和button的间隙,是空白符的缘故-->
<!--1.给爸爸设置font-size: 0;不推荐-->
<!--2.设置浮动，装B-->
<!--3.写在同一行，最简单-->
<form action="" method="post">
<input type="text" />
<input type="button" />
</form>
</div>
<!--例子-->
<div class="same div">
<input type="text" class="same text">
<button class="same btn">查询</button>
</div>
</body>
</html>