如何用Flexbox实现表单字段移动端堆叠、桌面端并排？

问题分析 #

你需要用Flex布局实现短信订阅表单的响应式效果：桌面端让国家选择框和手机号输入框并排显示，移动端则垂直堆叠。原代码的核心问题是内联样式过多导致样式冲突、媒体查询未作用到目标元素，且表单元素的宽度设置未适配不同屏幕尺寸。

修改后的HTML代码 #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>短信订阅</title>
  </head>
  <body>
    <div class="subscription-container">
      <div class="text-section">
        <h2 id="top-text">NEVER MISS A DROP</h2>
        <h4 id="explanation">
          FOR TEXT MESSAGE ALERTS & POTENTIAL EARLY ACCESS, SIGN UP BELOW
        </h4>
      </div>
      <form id="form">
        <div class="input-group">
          <select id="country-select">
            <option>(+1) United States</option>
            <option>(+44) United Kingdom</option>
            <option>(+52) Mexico</option>
            <option>(+49) Germany</option>
            <option>(+354) Iceland</option>
          </select>
          <input
            id="phone-number"
            name="phone-number"
            placeholder="Please Enter Phone Number"
            type="tel"
          />
        </div>
        <div class="button-group">
          <button type="submit">CONFIRM SUBSCRIPTION</button>
        </div>
      </form>
      <p id="disclaimer">
        * I consent to recieve recurring automated marketing by text message through an automatic telephone dialing system. Consent is not a condition to purchase. STOP to cancel, HELP for help. Message and Data rates apply. View Privacy Policy & ToS
      </p>
    </div>
  </body>
</html>

修改后的CSS代码 #

/* 全局基础样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Athletic;
  src: url(Athletic.TTF);
}

.subscription-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.text-section {
  text-align: center;
  margin-bottom: 1.5rem;
}

#top-text {
  font-family: Athletic;
  margin-bottom: 0.5rem;
}

#explanation {
  font-family: Athletic;
  font-style: italic;
  font-size: 1rem;
}

/* 核心Flex布局：输入组 */
.input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#country-select {
  flex-basis: 180px;
  height: 30px;
  padding: 0 0.5rem;
}

#phone-number {
  flex: 1;
  height: 30px;
  padding: 0 0.5rem;
  text-align: center;
}

.button-group {
  display: flex;
  justify-content: center;
}

button {
  font-family: Athletic;
  background-color: black;
  color: white;
  border: none;
  height: 30px;
  width: 300px;
  cursor: pointer;
}

button:hover {
  background: #343a40;
}

#disclaimer {
  font-size: x-small;
  text-align: center;
  margin-top: 1rem;
}

/* 移动端响应式调整 */
@media screen and (max-width: 600px) {
  .input-group {
    flex-direction: column;
  }
  
  #country-select, #phone-number {
    width: 100%;
    flex-basis: auto;
  }
}

关键修改说明 #

1. 移除内联样式：把所有内联样式迁移到外部CSS，避免样式冲突，方便统一维护。
2. Flex容器配置：给输入框组添加.input-group类，默认设置display: flex实现桌面端并排，用gap控制元素间距，替代margin更简洁。
3. 宽度适配逻辑：桌面端给国家选择框设置固定flex-basis，手机号输入框用flex:1占满剩余空间；移动端通过媒体查询将.input-group的flex-direction改为column，让元素垂直堆叠，同时设置两个元素宽度100%。
4. 语义化与错误修复：修正了HTML中h2/h4标签不匹配的问题，将手机号输入类型改为tel更符合语义规范。
5. 全局布局优化：添加box-sizing: border-box确保元素尺寸计算一致，设置容器最大宽度和内边距，提升整体布局的适配性。

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