<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; padding: 20px; background-color: pink; margin: 30px auto; } input{ width: 120px; height: 20px; border: none; padding: 5px; /*vertical-align: top;*/ border: 2px solid green; } button{ width: 40px; height: 34px; border: none; background-color: green; padding: 0 5px; /*vertical-align: top;*/ color: #fff; } </style> </head> <body> <div class="box"> <input type="text"><button type="button">查詢</button> </div> <script type="text/javascript"> </script> </body> </html>
上面代碼會出現這種效果：
解決方法：給兩個同時加上vertical-align:top；即可，把上面代碼的注釋去掉即可；
最后;