如何让按钮叠加在100%宽度的input右侧？当前按钮自动换行

实现方案 #

通过父容器相对定位+按钮绝对定位的方式，既能让按钮叠加在输入框右侧，又能保证输入框保持100%宽度，同时避免输入内容被按钮遮挡。

HTML 结构 #

<div class="input-wrapper">
  <input type="text" class="input-field" placeholder="请输入内容" />
  <button class="overlay-btn">确认</button>
</div>

CSS 样式 #

/* 父容器：作为按钮定位的参照 */
.input-wrapper {
  position: relative;
  width: 100%;
  /* 可选：限制输入框最大宽度 */
  max-width: 500px;
}

/* 输入框：占满容器宽度，预留右侧按钮空间 */
.input-field {
  width: 100%;
  padding: 10px 50px 10px 15px;
  box-sizing: border-box; /* 确保内边距不增加总宽度 */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* 按钮：绝对定位到输入框右侧，垂直居中 */
.overlay-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px;
  border: none;
  background-color: #2563eb;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

关键细节说明 #

• position: relative：给父容器设置相对定位，让按钮的绝对定位以该容器为基准，不会跑到页面其他位置
• box-sizing: border-box：确保输入框的width: 100%包含内边距和边框，不会超出父容器范围
• transform: translateY(-50%)：让按钮在垂直方向上与输入框居中对齐，视觉上更协调
• 输入框的右侧内边距（padding-right）需要略大于按钮的宽度，避免输入的文字被按钮遮挡

效果对比 #

• 问题效果：
  
• 实现效果：
  

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