Mailchimp表单邮箱输入框与提交按钮无法同行显示如何解决

解决方案 #

实现邮箱输入框与提交按钮同排显示，可按以下步骤调整代码：

步骤1：调整HTML结构 #

将输入框和提交按钮包裹在同一个行容器内，同时移除包裹按钮的clear foot容器（Mailchimp自带的clear类默认会清除浮动导致按钮换行），调整后代码如下：

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="https://tretuser.us20.list-manage.com/subscribe/post?u=1197d33bb52c8de2a2747b690&amp;id=8a796eb2c8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <div class="form_fields">
    <div id="mc_embed_signup_scroll">
      <label for="mce-EMAIL">Sign up for early access</label>
      <!-- 反垃圾校验隐藏域 -->
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1197d33bb52c8de2a2747b690_8a796eb2c8" tabindex="-1" value=""></div>
      <!-- 新增行容器包裹输入框和按钮 -->
      <div class="mc-form-row">
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter Email" required>
        <input type="submit" value="Join Waitlist" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
    </div>
  </div>
</form>
</div>

步骤2：更新CSS样式 #

替换原有CSS代码，用flex布局实现同排效果，同时修复原有样式冲突问题：

/* Mailchimp form */
#mc_embed_signup {
  color: white;
  text-align: center;
}

#mc_embed_signup label {
  font-size: 3em;
  display: block;
  margin-bottom: 1.5em;
}

/* 行容器flex布局，实现元素同排居中 */
.mc-form-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 650px;
  justify-content: center;
}

.email {
  border: 1px solid #b4becb;
  padding: 15px;
  flex: 0 1 380px;
  font-size: 16px;
  border-radius: 5px;
}

.email:focus {
  outline: 2px solid #FAE105;
  outline-offset: 2px;
}

.button {
  background-color: #FAE105;
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 16px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* 修正hover选择器匹配按钮类名 */
.button:hover {
  transform: translateY(-2px);
}

调整后即可实现输入框和按钮同排显示的效果，flex布局相比传统浮动方式兼容性更好，也不会出现垂直对齐偏差的问题。

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