如何在div中实现左3按钮组+中间输入框+右3按钮组的对齐布局

需要在一个.container容器内实现如下布局：左侧放置包含3个按钮的按钮组，中间放置输入框，右侧放置另一个包含3个按钮的按钮组，确保三者垂直对齐且布局符合预期。

当前HTML代码结构如下：

<div class="container">
  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>

  <div>
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>
</div>

布局状态说明 #

• 调整前：三个区块垂直堆叠，未横向排列
• 调整后（非预期）：虽横向排列，但输入框未占满中间空间，或对齐方式不符合要求
• 预期布局：左右按钮组分别靠容器两侧，中间输入框拉伸填满剩余空间，三者垂直居中对齐

解决方案：使用Flexbox布局 #

Flexbox是实现这类横向对齐布局最简洁的方式，只需给容器和子元素添加少量CSS：

1. 设置容器为Flex布局，让子元素横向排列并垂直居中
2. 让中间输入框的父容器占满剩余空间，确保输入框能拉伸填充空白区域
3. 输入框宽度设为100%，填满其父容器

修改后的完整代码（含CSS）：

<div class="container">
  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>

  <div class="input-wrapper">
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>
</div>

<style>
.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 1rem; /* 区块之间的间距，可按需调整 */
  padding: 0.5rem; /* 可选，给容器加内边距优化视觉 */
}

.input-wrapper {
  flex: 1; /* 占满容器剩余空间 */
}

.input-wrapper input {
  width: 100%; /* 输入框填满父容器 */
  padding: 0.5rem; /* 可选，优化输入框内边距 */
  box-sizing: border-box; /* 确保内边距不超出宽度 */
}

/* 若使用Bootstrap，.button-group默认是Flex布局，无需额外调整 */
</style>

效果说明 #

• 左右按钮组分别停靠容器的左侧和右侧
• 中间输入框自动拉伸，填满左右按钮组之间的所有空白区域
• 所有元素垂直居中对齐，完全匹配预期布局

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