如何固定搜索按钮位置并实现输入框向左展开？

核心思路 #

不用position:fixed，而是通过父容器相对定位+按钮绝对定位，或者Flex布局实现，这两种方案更适配搜索栏的常规布局场景。

方案1：Flex布局（推荐） #

将搜索栏容器设为display:flex，输入框通过flex:1占满剩余空间，按钮固定宽度，输入框会自动向左扩展，按钮始终固定在右侧：

/* 搜索栏容器 */
.search-container {
  display: flex;
  align-items: center;
  width: 300px; /* 初始宽度可按需调整 */
}

/* 输入框 */
.search-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

/* 搜索按钮 */
.search-btn {
  width: 60px; /* 固定按钮宽度 */
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0 4px 4px 0;
  background: #f5f5f5;
  cursor: pointer;
}

HTML结构示例：

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
  <button class="search-btn">🔍</button>
</div>

方案2：绝对定位方案 #

若要保留原有布局结构，给父容器设position:relative，按钮设position:absolute固定在右侧，同时给输入框设置padding-right避开按钮区域：

/* 搜索栏容器 */
.search-container {
  position: relative;
  width: 300px; /* 初始宽度 */
}

/* 输入框 */
.search-input {
  width: 100%;
  padding: 8px 68px 8px 8px; /* 右侧padding大于按钮宽度，避免内容被覆盖 */
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 搜索按钮 */
.search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 60px;
  padding: 8px;
  border: none;
  border-radius: 0 4px 4px 0;
  background: #f5f5f5;
  cursor: pointer;
}

为什么position:fixed没生效？ #

position:fixed是相对于浏览器视口定位的，而非父容器。如果你的搜索栏本身处于页面某个容器内，使用fixed会让按钮脱离原有布局跑到视口右侧，不符合需求。因此相对定位+绝对定位或Flex布局才是正确方向。

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