我正在尝试将我的 mailchimp 嵌入表单、注册调用、输入字段和提交按钮全部放在一行中。我在这里尝试遵循这个答案:https://codepen.io/pageaffairs/pen/JDrhG调整了一些东西,但仍然都在中间并相互堆叠。 http://theinvicto.com/
尝试将“clear: left”更改为“clear:none”并使用 text-align 将表单居中,但仍然不在同一行。我会为此使用表格吗?
HTML:
#mc_embed_signup{background:#50B1C5; clear:none; }
#mc-embedded-subscribe-form.validate {
background: #50B1C5;
}
#mc_embed_signup #mce-EMAIL {
border: 3px solid #F3A733;
}
input#mc-embedded-subscribe.button {
background-color: #F3A733;
font-family: ‘Abel’;
}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
#mc_embed_signup{ clear:none; font:18px Abel,Arial,sans-serif; vertical-align: middle; width: 100%; margin: 0 auto;}
#mc_embed_signup form {display:block; position:relative; text-align:center;}
#mc_embed_signup input {border:3px solid #F3A733; -webkit-appearance:none;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {background-color: #F3A733; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#EB7162;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}
#mc_embed_signup .clear {clear:none; display: inline-block; width: 31%; vertical-align: top;}
#mc_embed_signup label {display:inline-block; font-size:16px; padding-bottom:10px; font-weight:bold; width: 70%;vertical-align: top;}
#mc_embed_signup input.email {display:inline-block; padding:8px 0; margin:0 10px 10px 0; text-indent:5px; width:34%;vertical-align: top;}
#mc_embed_signup input.button {display:block; width:100%; margin:0 0 10px 0;}
@media screen and (max-width: 780px) {
#mc_embed_signup {width: 100%;}
#mc_embed_signup label, #mc_embed_signup input.email, #mc_embed_signup .clear {display: block; width: 100%;}
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://theinvicto.us17.list-manage.com/subscribe/post?u=197c4c27bd3b031b5957c0035&id=0d6f057689" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL"><span style="font-size: 35px;">be the first to know:</span></label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" 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_197c4c27bd3b031b5957c0035_0d6f057689" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
让我知道是否有人在其他方面有过好运。我正在学习并尝试进行故障排除,但最终决定询问我哪里出了问题。我想也许这是一个 display: table 的东西,但我可能错了,哈哈。
最佳答案
不需要为此使用表格。要将按钮放在同一行,您可以简单地使用:
.clear {
display: inline-block;
}
<div>
“清除”类显示为 block
默认情况下,由于它包含订阅按钮,它将显示在新行上。所以将其更改为 inline-block
将允许它移动到同一行。
但是,查看您网站的源代码,您还有 <br>
和 <p>
表单元素之间的标签,因此必须删除这些标签才能工作。或者,您可以使用以下样式隐藏它们:
#mc_embed_signup_scroll p,
#mc_embed_signup_scroll br {
display: none;
}
希望这对您有所帮助!
关于html - 使用 CSS 在一行中获取 mailchimp 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47655771/