实现响应式表单布局：大屏水平排列，小屏垂直排列

我的表单是非表格结构，代码如下：

<div class="acym_module " id="acym_module_formAcym77091">
   <div class="acym_fulldiv" id="acym_fulldiv_formAcym77091">
      <form enctype="multipart/form-data" id="formAcym77091" name="formAcym77091" method="POST" action="/en/component/acym/frontusers.html?tmpl=component" onsubmit="return submitAcymForm('subscribe','formAcym77091', 'acymSubmitSubForm')">
         <div class="acym_module_form">
            <div class="acym_form">
               <div class="onefield fieldacy1 acyfield_text" id="field_1">
                  <label class="cell margin-top-1">
                     <div class="acym__users__creation__fields__title">Name</div>
                     <input name="user[name]" value="" data-authorized-content="{&quot;0&quot;:&quot;all&quot;,&quot;regex&quot;:&quot;&quot;,&quot;message&quot;:&quot;Incorrect value for the field Name&quot;}" type="text" class="cell  ">
                  </label>
                  <div class="acym__field__error__block" data-acym-field-id="1"></div>
               </div>
               <div class="onefield fieldacy2 acyfield_text" id="field_2">
                  <label class="cell margin-top-1">
                     <div class="acym__users__creation__fields__title">Email</div>
                     <input id="email_field_243" name="user[email]" value="" data-authorized-content="{&quot;0&quot;:&quot;all&quot;,&quot;regex&quot;:&quot;&quot;,&quot;message&quot;:&quot;Incorrect value for the field Email&quot;}" required="" type="email" class="cell acym__user__edit__email  ">
                  </label>
                  <div class="acym__field__error__block" data-acym-field-id="2"></div>
               </div>
            </div>
            <p class="acysubbuttons">
            <noscript>
               <div class="onefield fieldacycaptcha">
                  Please enable the javascript to submit this form
               </div>
            </noscript>
            <input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym77091', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
            </p>
         </div>
         <input type="hidden" name="ctrl" value="frontusers">
         <input type="hidden" name="task" value="notask">
         <input type="hidden" name="option" value="com_acym">
         <input type="hidden" name="ajax" value="1">
         <input type="hidden" name="successmode" value="replace">
         <input type="hidden" name="acy_source" value="Module n°774">
         <input type="hidden" name="hiddenlists" value="26">
         <input type="hidden" name="fields" value="name,email">
         <input type="hidden" name="acyformname" value="formAcym77091">
         <input type="hidden" name="acysubmode" value="mod_acym">
         <input type="hidden" name="confirmation_message" value="">
         <input type="text" name="my_name" value=""><input type="hidden" name="991b068ee5b7170598a8108feee6a325" value="1659870934.0">
      </form>
   </div>
</div>

我需要给field_1、field_2和acysubbuttons设置样式，实现响应式效果。当前表单在笔记本电脑上是垂直排列的：

我希望屏幕空间充足时，表单字段和按钮能水平并排显示，尝试了以下CSS但没生效：

#field_1{
  max-width: 30%;
}

解决方案 #

问题出在默认的块级元素布局，div.onefield默认是垂直堆叠的，只设置宽度不会改变布局方式。可以用Flexbox来实现响应式水平布局，步骤如下：

1. 给表单容器和按钮容器设置Flex布局，配合媒体查询实现响应式切换：

/* 基础样式：小屏幕垂直排列 */
.acym_form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 字段间间距 */
}

.acym_module_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 大屏幕（比如768px以上）水平排列 */
@media (min-width: 768px) {
  .acym_form {
    flex-direction: row;
    align-items: flex-end; /* 让字段底部对齐，和按钮高度匹配 */
  }
  
  .acym_form .onefield {
    flex: 1; /* 字段平分可用空间 */
    min-width: 200px; /* 保证小屏幕下字段不会太窄 */
  }
  
  .acysubbuttons {
    margin: 0; /* 清除默认p标签的外边距 */
  }
}

2. 可选：调整输入框的宽度，让它占满父容器：

.acym_form input {
  width: 100%;
  box-sizing: border-box;
}

这样设置后，屏幕宽度大于768px时，姓名、邮箱字段和订阅按钮会水平排列；屏幕变窄时自动切换为垂直布局，满足响应式需求。

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