Mailchimp表單欄位顯示行內不起作用

希望有人能指出我正確的方向，因為我在這個問題上花了太長時間。我在我的網站上添加了一個 Mailchimp 表單，但我希望“輸入電子郵件”表單欄位與按鈕位于同一行。本質上，“加入候補名單”按鈕應位于“輸入電子郵件”表單欄位的右側。我已經嘗試了一些東西，但似乎無法讓它作業。在此先感謝您的幫助。

第一張圖片是我希望表格的樣子。第二張圖是當前狀態。在此先感謝您的幫助！

HTML代碼：

<!-- 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>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter Email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1197d33bb52c8de2a2747b690_8a796eb2c8" tabindex="-1" value=""></div>
            <div class="clear foot">
                <input type="submit" value="Join Waitlist" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
            </div>
        </div>
        </form>
        </div>

CSS代碼：

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

#mc_embed_signup label {
font-size: 3em;
 }

#mc_embed_signup_scroll .email {
width: 50%;
margin-top: 1.5em;
}

.form_fields {
display: inline-block;
}

.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;
}

button:hover {
transform: translateY(-2px);
 }

 .email {
border: 1px solid #b4becb;
padding: 15px;
width: 30%;
font-size: 16px;
margin-right: 8px;
border-radius: 5px;
 }

.email input:focus {
outline-color: #FAE105;
 }

uj5u.com熱心網友回復：

查看例如 Mailchimp 提供的 CSS 并根據自己的喜好進行更改并洗掉嵌入代碼中的鏈接 CSS 總是一個好主意。

因此，如果您洗掉 Mailchimp css 的鏈接：

<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">

并將您的 css 替換為以下內容，它幾乎就像您的設計一樣：

#mc_embed_signup form {
  text-align:center; 
  padding:10px 0 10px 0;
}
.mc-field-group { 
  display: inline-block; 
} /* positions input field horizontally */

#mc_embed_signup input.email {
  font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
  border: 1px solid #b4becb;
  padding: 15px;
  width: 30%;
  font-size: 16px;
  margin-right: 8px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  color: #343434; 
  background-color: #fff; 
  box-sizing:border-box; 
  display: inline-block; 
}
#mc_embed_signup input.email:focus {
  outline-color: #FAE105;
}
#mc_embed_signup label {
  display:none; 
  font-size:16px; 
  padding-bottom:10px; 
  font-weight:bold;
}

#mc_embed_signup .clear {
  display: inline-block;
}

#mc_embed_signup .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;
  color: #000; 
  box-sizing:border-box; 
  display: inline-block; 
  margin-left: 0.5rem; 
  transition: all 0.23s ease-in-out 0s;
}
#mc_embed_signup .button:hover {
  cursor:pointer;
  transform: translateY(-2px);
}
#mc_embed_signup div#mce-responses {
  float:left; 
  top:-1.4em; 
  padding:0em .5em 0em .5em; 
  overflow:hidden; 
  width:90%;
  margin: 0 5%; 
  clear: both;
}
#mc_embed_signup div.response {
  margin:1em 0; 
  padding:1em .5em .5em 0; 
  font-weight:bold; 
  float:left; 
  top:-1.5em; 
  z-index:1; 
  width:80%;
}
#mc_embed_signup #mce-error-response {
  display:none;
}
#mc_embed_signup #mce-success-response {
  color:#529214; 
  display:none;
}
#mc_embed_signup label.error {
  display:block; 
  float:none; 
  width:auto; 
  margin-left:1.05em; 
  text-align:left; 
  padding:.5em 0;
}
@media (max-width: 768px) {
  #mc_embed_signup input.email {
      width:100%; 
      margin-bottom:5px;
  }
  #mc_embed_signup .clear {
      display: block; 
      width: 100% 
  }
  #mc_embed_signup .button {
      width: 100%; 
      margin:0; 
  }
}

標籤：html css 形式 邮件黑猩猩

上一篇：表單發送錯誤資料

下一篇：如何將表單中的用戶輸入列印到網站螢屏上