关于搜索框和搜索按钮,相爱却不能在一起的理由
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 500px; height: 300px; background: burlywood; font-size: 0; } .same { padding: 0; margin: 0; box-sizing: border-box; border: 0; height: 30px; } .div { width: 300px; height: 32px; border: solid 1px #000000; } .text { width: 80%; background-color: rgba(147, 147, 147, 0.44); outline: none; float: left; } .btn { width: 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>