CSS布局实战：如何将按钮精确放置在输入框左侧

<header>
  <div id="searchForm">
    <form>
      <!-- 按钮元素放在输入框之前 -->
      <button class="searchButton" id="searchBtn" type="submit">
        Search
      </button>
      <input class="searchInputMain">
    </form>
  </div>
</header>

header {
  position: relative;
  z-index: 2;
}

.searchInputMain {
  width: 300px;
  height: 40px;
  /* 移除不必要的边距，让Flexbox管理间距 */
}

.searchButton {
  width: 200px;
  height: 45px; /* 调整高度以匹配输入框或根据设计需求 */
  /* 移除不必要的浮动或定位属性 */
}

#searchForm {
  margin-top: 20px;
  /* 移除不必要的浮动或定位属性 */
}

#searchForm form {
  display: flex; /* 关键：使子元素（按钮和输入框）弹性排列 */
  /* 可以添加其他Flexbox属性来控制对齐、间距等，例如：
     align-items: center; /* 垂直居中对齐 */
     gap: 10px; /* 元素之间的间距 */
  */
}

<header>
  <div id="searchForm">
    <form>
      <button class="searchButton" id="searchBtn" type="submit">
        Search
      </button>
      <input class="searchInputMain">
    </form>
  </div>
</header>

/* header的样式，与本布局核心无关，但保留以保持上下文 */
header {
  position: relative;
  z-index: 2;
}

/* 输入框样式 */
.searchInputMain {
  width: 300px;
  height: 40px;
  border: 1px solid #ccc; /* 添加边框以便观察 */
  padding: 0 10px; /* 增加内边距 */
  box-sizing: border-box; /* 确保宽度包含内边距和边框 */
}

/* 按钮样式 */
.searchButton {
  width: 100px; /* 调整宽度 */
  height: 40px; /* 与输入框高度保持一致 */
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px; /* 按钮与输入框之间的间距 */
  box-sizing: border-box;
}

/* 搜索表单容器样式 */
#searchForm {
  margin-top: 20px;
  display: flex; /* 使 searchForm 容器本身也是一个 Flex 容器，方便其在父元素中定位 */
  justify-content: center; /* 如果希望整个搜索表单居中 */
  /* 移除原有的 float: right; margin-right: 500px; 等可能导致布局混乱的属性 */
}

/* 针对表单元素本身应用 Flexbox 布局 */
#searchForm form {
  display: flex; /* 核心：使按钮和输入框弹性排列 */
  align-items: center; /* 垂直居中对齐，确保按钮和输入框顶部对齐 */
}