如何保持输入框与按钮等宽，同时将麦克风图标及文本对齐到输入框旁？

要实现输入框和按钮宽度一致，同时让麦克风图标与action span对齐在输入框右侧且不挤压输入框宽度，可通过以下修改实现：

修改后的CSS代码 #

input {
  background-color: #dce1eb;
  border: 0;
  padding: 15px;
  border-radius: 8px;
  font-size: 20px;
  margin: 10px 0;
  width: 100%; /* 输入框填满父容器 */
  box-sizing: border-box; /* 确保padding不额外增加总宽度 */
}

button {
  background-color: #ac485a;
  border: 0;
  padding: 15px;
  border-radius: 8px;
  font-size: 20px;
  width: 100%; /* 按钮填满容器宽度，与输入组对齐 */
}

.container {
  display: flex;
  flex-direction: column;
  margin: 30px auto;
  max-width: 320px;
}

#voice {
  width: 40px;
}

.input-group {
  display: flex;
  align-items: center; /* 输入框与图标、span垂直居中对齐 */
}

.input-wrapper {
  flex: 1; /* 占据flex容器内剩余所有空间，保证输入框宽度不受图标影响 */
}

.voice-action-wrapper {
  display: flex;
  align-items: center;
  gap: 5px; /* 图标与span之间的间距 */
  padding: 0 8px; /* 避免元素贴边，提升视觉效果 */
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="container">
    <div class="input-group">
      <div class="input-wrapper">
        <input type="text" name="" placeholder="" id="input-field" />
      </div>

      <div class="voice-action-wrapper">
        <img
          src="assets/microphone.png"
          id="voice"
          onclick="SpeechRecog()"
          alt="麦克风图标"
        />
        <span id="action"></span>
      </div>
    </div>

    <button id="add-button">Click Me</button>
  </div>

  <script src="index2.js"></script>
</body>
</html>

关键改动说明 #

1. 输入框宽度控制：给输入框添加width: 100%和box-sizing: border-box，确保输入框完全填充父容器，且padding不会额外扩大元素总宽度。
2. Flex布局分配空间：.input-wrapper设置flex: 1，让它占据flex容器内的剩余所有空间，这样输入框的可用宽度不会被麦克风图标挤压，输入组整体宽度与容器的max-width保持一致。
3. 垂直居中对齐：.input-group设置align-items: center，让输入框和右侧的图标、span在垂直方向上居中，视觉更协调。
4. 按钮宽度匹配：按钮设置width: 100%，直接填满容器宽度，与输入组的总宽度完全一致。
5. 图标与span布局优化：用.voice-action-wrapper的flex布局让图标和span横向排列，添加间距和内边距，避免元素紧贴边缘。

内容的提问来源于stack exchange，提问作者The Code Whisperer