如何让Mailchimp表单的两个输入元素同行并缩小整体表单

1. 实现First Name与Email Address输入框同行 #

你之前给#mc_embed_signup加flex无效，因为两个输入组都嵌套在.mc-field-group容器内，需要给这个容器设置flex布局，同时调整内部元素样式避免布局混乱：

/* 让输入组容器变为flex布局，添加间距并支持换行适配小屏幕 */
.mc-field-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
}

/* 给每个输入项（label+input）设置弹性宽度，保证最小适配尺寸 */
.mc-field-group > div {
  flex: 1 1 200px;
  min-width: 200px;
}

/* 调整label和input的块级显示，避免独占一行 */
.mc-field-group label {
  display: block;
  margin-bottom: 5px;
}
.mc-field-group input {
  width: 100%;
  box-sizing: border-box;
}

需修改HTML结构，把两个输入项分别用<div>包裹，避免label和input混排：

<div class="mc-field-group">
  <div>
    <label for="mce-FNAME">First Name </label>
    <input type="text" name="FNAME" class=" text" id="mce-FNAME" value="">
  </div>
  <div>
    <label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
    <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value="">
  </div>
</div>

2. 让外层容器跟随表单收缩 #

外层容器#mc_embed_shell默认宽度为100%，所以即使给#mc_embed_signup设置宽度，它仍会占满父容器。解决方法是给#mc_embed_shell设置匹配的宽度，同时清理原CSS中的无效属性：

#mc_embed_shell {
  width: 600px; /* 和表单目标宽度一致 */
  margin: 0 auto; /* 可选，让容器居中显示 */
}

#mc_embed_signup{
  background:#F9F9F9;
  clear:left; 
  font:14px Helvetica,Arial,sans-serif;
  width: 100%; /* 让表单占满外层容器宽度 */
}

注：原CSS中#mc_embed_signup里的false是无效属性，会导致样式解析错误，必须删除。

修改后的完整代码 #

<div id="mc_embed_shell">
  <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    #mc_embed_shell {
      width: 600px;
      margin: 0 auto;
    }
    #mc_embed_signup{
      background:#F9F9F9;
      clear:left; 
      font:14px Helvetica,Arial,sans-serif;
      width: 100%;
    }
    #mc_embed_signup .button {
      background-color: #00B7CD; 
      color: #fff; 
      font-size:20px; 
      text-align: center; 
      padding: 14px 40px; 
      width: 50%; 
      height: 75%;
    }
    .mc-field-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      padding: 0 20px;
    }
    .mc-field-group > div {
      flex: 1 1 200px;
      min-width: 200px;
    }
    .mc-field-group label {
      display: block;
      margin-bottom: 5px;
    }
    .mc-field-group input {
      width: 100%;
      box-sizing: border-box;
    }
  </style>
  <div id="mc_embed_signup">
    <form action="https://alter-nativa.us17.list-manage.com/subscribe/post?u=7acfd67a14644bdc7bfa062a3&amp;id=197f8fb9d5&amp;f_id=00f345e2f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
      <div id="mc_embed_signup_scroll">
        <center><h3><strong>Free Guide: The Family’s Guide to Finding the Right Addiction Treatment</strong></h3></center>
        <center><p style="font-size:22px; font-weight: 700; line-height: 150%; padding-left:5%; padding-right:5%;">Download our FREE 22-page guide with everything you need to understand your options and take the next step—compassionate, clear, and culturally relevant.<br>
👉 Start with clarity. Start here.</p></center>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
        <div class="mc-field-group">
          <div>
            <label for="mce-FNAME">First Name </label>
            <input type="text" name="FNAME" class=" text" id="mce-FNAME" value="">
          </div>
          <div>
            <label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
            <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value="">
          </div>
        </div>
        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display: none;"></div>
          <div class="response" id="mce-success-response" style="display: none;"></div>
        </div>
        <center>
          <div aria-hidden="true" style="position: absolute; left: -5000px;"><input type="text" name="b_7acfd67a14644bdc7bfa062a3_197f8fb9d5" tabindex="-1" value=""></div>
          <div class="clear"><input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Download Here"></div>
        </center>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
  <script type="text/javascript">
    (function($) {
      window.fnames = new Array(); window.ftypes = new Array();
      fnames[0]='EMAIL';ftypes[0]='email';
      fnames[1]='FNAME';ftypes[1]='text';
      fnames[2]='LNAME';ftypes[2]='text';
      fnames[3]='ADDRESS';ftypes[3]='address';
      fnames[4]='PHONE';ftypes[4]='phone';
      fnames[5]='BIRTHDAY';ftypes[5]='birthday';
      fnames[6]='MMERGE6';ftypes[6]='text';
    }(jQuery));
    var $mcj = jQuery.noConflict(true);
  </script>
</div>

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