技术咨询：输入框与按钮为何未占满其父div的全部宽度？

你遇到的输入框和按钮没占满.search-wrapper宽度的问题，主要有两个核心原因：

• 你的.search按钮设置了position: absolute，这会让它脱离正常的文档流，不再参与父容器的宽度计算，相当于“飘”在外面了，自然不会和输入框一起撑满父容器。
• 输入框.search-query和按钮都没有设置合适的宽度，也没有用布局方式来分配父容器的空间。

下面给你两种可行的修复方案：

方案一：使用Flex布局（推荐） #

Flex是处理这种横向排列元素的最佳方式，能轻松让元素占满容器宽度，还能自动适配：

.my-form { width: 100% }
.search-wrapper { 
  width: 50%; 
  margin: 0 auto; 
  background: #000;
  display: flex; /* 开启Flex布局 */
}
.search-query {
  flex: 1; /* 让输入框占据剩余所有空间 */
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  border: none; /* 可以去掉默认边框，更美观 */
  box-sizing: border-box; /* 确保内边距不增加总宽度 */
}
.search {
  background: #ea7d20;
  border-top-right-radius: 25px; /* 修正圆角，只保留右上和右下 */
  border-bottom-right-radius: 25px;
  border: none;
  padding: 0 1.5rem; /* 给按钮加左右内边距，避免文字太挤 */
  cursor: pointer;
}

对应的HTML保持不变即可，Flex会自动让输入框占满剩余空间，按钮保持自身宽度，两者加起来刚好填满.search-wrapper。

方案二：调整绝对定位（不推荐，维护性差） #

如果你一定要用绝对定位，需要给父容器设置position: relative，同时给输入框设置合适的宽度，给按钮定位到右侧：

.my-form { width: 100% }
.search-wrapper { 
  width: 50%; 
  margin: 0 auto; 
  background: #000;
  position: relative; /* 让按钮的绝对定位相对于这个容器 */
}
.search-query {
  width: calc(100% - 80px); /* 减去按钮的宽度，这里假设按钮宽80px */
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  box-sizing: border-box; /* 确保内边距不会增加总宽度 */
}
.search {
  background: #ea7d20;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0; /* 让按钮高度和容器一致 */
  width: 80px; /* 固定按钮宽度 */
  border: none;
  cursor: pointer;
}

这种方式需要手动计算宽度，一旦按钮内容变化就需要调整，不如Flex灵活。

另外提醒下：给表单元素加上box-sizing: border-box是个好习惯，它能让内边距和边框不会额外增加元素的总宽度，避免布局混乱。

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