如何让搜索框Input与提交Button边框完全对齐？（附代码）

以下是修复后的完整代码，重点调整样式部分解决对齐问题：

<!DOCTYPE html>
<html lang="nl">
<head>
    <link rel="stylesheet" type="text/css" href="https://webtinq.nl/denory/css/style.css">
    <title>Denory Search Engine</title>
    <link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" 
 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
 crossorigin="anonymous">
    <style>
        * {
            box-sizing: border-box; /* 统一盒模型，避免padding/border额外增加尺寸 */
        }
        
        .search {
            margin: 0 auto;
            text-align: center;
        }
        
        .search h4 {
            margin: 70px 0px 20px 0px;
            font-size: 50px;
        }
        
        .search input[type=text]{
            width: 700px;
            outline: none;
            padding: 15px 30px;
            border-radius: 30px 0px 0px 30px;
            border: 1px solid black;
            border-right: none;
            vertical-align: middle; /* 与按钮垂直对齐 */
            height: 56px; /* 和按钮高度统一 */
        }
        
        .search img{
            height: 30px;
            width: 30px;
        }
        
        .search button#go {
            background: white;
            border-radius: 0px 30px 30px 0px;
            height: 56px;
            outline: none;
            border: 1px solid black;
            border-left: none;
            vertical-align: middle; /* 与输入框垂直对齐 */
            padding: 0 20px; /* 给按钮内图标留间距 */
            cursor: pointer;
        }
        
        #mode {
            border: none;
            background: #f0faf7;
            outline: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://webtinq.nl/denory/index.html">Denory</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="https://webtinq.nl/denory/index.html">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://webtinq.nl/denory/about.html">About me</a>
  </li>
  <select id="mode">
      <option value="Light mode">Light mode</option>
      <option value="Dark mode">Dark mode</option>
  </select>
  </ul>

  </div>
  </nav>
   <!--search-->
  <div class="search">
   <h4>Denory</h4>
    <input type="text" id="search" placeholder="Search the web"><button id="go" onClick="go()"><img src="https://webtinq.nl/denory/afbeeldingen/magnifying glasso.png"></button>
  </div>
<script>
var input = document.getElementById("search");

 // Execute a function when the user presses a key on the keyboard
 input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
 if (event.key === "Enter") {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
 go();
 }
 });
 function go(){
window.location.href = "https://google.com/search?q=" + input.value;
 }
 setInterval(function(){if(document.getElementById("mode").value == "Light mode") 
{document.querySelector("body").style.background = "white"; 
document.querySelector("body").style.color = 
"black";}else{document.querySelector("body").style.background = "black"; 
  document.querySelector("body").style.color = "white";}}, 100);
  </script>
</body>
</html>

关键修改说明： #

• 全局设置box-sizing: border-box：确保元素的padding和border不会改变整体尺寸，避免布局偏移。
• 统一输入框与按钮的height:56px：保证两者高度完全一致。
• 添加vertical-align: middle：让输入框和按钮在垂直方向上精准对齐。
• 合并按钮样式规则：移除重复的#go独立样式，统一在.search button#go中定义，避免样式冲突。
• 调整按钮内边距：给图标预留合适空间，同时不影响对齐效果。
• 修复HTML结构：移除多余的<center>标签，利用.search的text-align:center实现居中。

内容的提问来源于stack exchange，提问作者denoryprogrammer