响应式布局下如何将搜索表单的单个输入拆分为两行？

核心思路 #

用媒体查询配合Flexbox或Grid布局，在屏幕宽度小于768px时切换布局结构，让输入类元素自动换行占满整行。

方案1：Flexbox实现 #

HTML结构

<form class="search-form">
  <input type="text" placeholder="输入搜索内容" class="search-input">
  <select class="search-category">
    <option>全部分类</option>
    <option>分类A</option>
    <option>分类B</option>
  </select>
  <button type="submit" class="search-btn">搜索</button>
</form>

CSS样式

/* 桌面端默认布局 */
.search-form {
  display: flex;
  gap: 10px; /* 元素间间距 */
  align-items: center;
}

.search-input {
  flex: 2; /* 输入框占比更大 */
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-category {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-btn {
  padding: 8px 20px;
  background-color: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 移动端断点（<768px） */
@media (max-width: 767px) {
  .search-form {
    flex-wrap: wrap; /* 允许元素换行 */
  }

  /* 输入框和下拉框强制占满一行 */
  .search-input, .search-category {
    flex: 1 1 100%;
  }

  /* 按钮可选占满一行，或保持自适应宽度 */
  .search-btn {
    /* flex: 1 1 100%; 取消注释则按钮占满整行 */
    flex: 1 1 auto; /* 保持按钮自适应宽度 */
    margin-top: 8px;
  }
}

方案2：Grid实现 #

用Grid布局更简洁，直接修改列数即可：

/* 桌面端默认布局 */
.search-form {
  display: grid;
  grid-template-columns: 2fr 1fr auto; /* 三列：输入框、下拉框、按钮 */
  gap: 10px;
  align-items: center;
}

/* 移动端切换为单列 */
@media (max-width: 767px) {
  .search-form {
    grid-template-columns: 1fr;
  }
}

你之前没成功的可能原因 #

• Flexbox布局时没加flex-wrap: wrap，元素无法换行
• 没有给输入类元素设置flex: 1 1 100%，无法占满整行
• Grid布局时没在媒体查询里修改grid-template-columns为单列

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