如何用HTML和CSS实现按钮依附于两个输入框的布局？

你可以通过添加CSS Flex布局来实现目标效果，以下是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    /* 外层容器：横向排列输入框组和按钮，垂直居中对齐 */
    .input-group {
      display: flex;
      align-items: center;
      gap: 10px; /* 按钮和输入框之间的间距 */
    }
    /* 输入框组：垂直排列两个输入项 */
    .input-pair {
      display: flex;
      flex-direction: column;
      gap: 15px; /* 两个输入框之间的间距 */
    }
    /* 美化输入框样式 */
    input[type="text"] {
      padding: 8px;
      width: 200px;
    }
    /* 按钮样式调整 */
    input[type="image"] {
      height: 30px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="input-group">
    <div class="input-pair">
      <div>
        <label>First</label>
        <input type="text">
      </div>
      <div>
        <label>Second</label>
        <input type="text">
      </div>
    </div>
    <input type="image" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
  </div>
</body>
</html>

关键调整说明： #

• 移除了原代码中的<br>标签，改用Flex布局控制元素位置，布局更灵活可控
• 外层.input-group用横向Flex，让按钮垂直居中依附在两个输入框的中间位置
• .input-pair用垂直Flex，实现两个输入框的上下排列，通过gap控制间距
• 给输入框添加了内边距和固定宽度，让整体布局更规整

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