使用flex将按钮置于表单内，移动端无法上下堆叠该如何解决

问题根因 #

• 原代码中按钮使用position: absolute脱离了正常文档流，导致移动端布局时无法跟随flex布局和输入框上下堆叠
• 媒体查询中选择器错误使用#url-25，未命中表单元素#form，导致移动端适配规则未生效

修正后的完整代码 #

HTML 代码 #

<form id="form">
  <input type="text" name="name" placeholder="text" class="input-field">
  <input type="submit" value="BUILD YOUR APP" class="button">
</form>

CSS 代码 #

#form {
  position: relative;
  width: 100%;
  max-width: 600px; /* 可根据桌面端实际需求调整最大宽度 */
}

.input-field {
  width: 100%;
  padding: 12px 180px 12px 20px; /* 右侧内边距预留按钮位置，第二个数值可根据按钮实际宽度调整 */
  border-radius: 50px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 16px;
}

.button {
  font-size: 16px !important;
  border-radius: 50px !important;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 24px;
  border: none;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 800px) {
  #form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box;
  }
  .input-field {
    padding: 12px 20px; /* 移动端取消右侧预留的按钮位置 */
    margin-bottom: 12px;
  }
  .button {
    position: static; /* 取消绝对定位，回归正常文档流 */
    transform: none;
    right: auto;
    top: auto;
    padding: 12px 24px;
    margin: 0;
  }
}

实现逻辑说明 #

• 桌面端通过给输入框设置右侧内边距预留按钮位置，配合表单的相对定位、按钮的绝对定位实现按钮放在输入框内部的效果，同时不会遮挡用户输入的文字
• 移动端媒体查询中直接将按钮的定位改为static，使其回归正常文档流，配合表单的flex-direction: column即可自动实现输入框和按钮上下堆叠的效果
• 修正了原媒体查询的选择器错误，确保移动端适配规则可以正常命中表单元素

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