MailChimp 表单和按钮在同一行

Question

在我的 MailChimp 表单上，我希望表单和提交的按钮彼此内联。

我一直在尝试几种不同的浮动和显示变体，但都没有达到预期的效果。

这是原始代码。有人对如何对齐表单和按钮有任何建议吗？

#mc_embed_signup .button {
	clear: both;
	background-color: #aaa;
	border: 0 none;
	border-radius: 4px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	margin: 10px 0px 10px 0;
	padding: 0 22px;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;
	width: auto;
}
#mc_embed_signup .mc-field-group input {
	display: block;
	width: 100%;
	padding: 8px 0;
	text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
	border-color: #6B0505;
}
#mc_embed_signup input {
	border: 1px solid #999;
	-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
	display: block;
	margin-bottom: 3px;
}

                <!-- Begin MailChimp Signup Form -->
                <style type="text/css">
                    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
                       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
                </style>
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
                    <label for="mce-EMAIL">Email Addresse </label>
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name@domain.de">
                </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>    <!-- 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;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->

Answer 1

在简报中建议使用“旧式”代码，带有<table> 和内联样式。如果您使用表格，表格可以彼此相邻，它将在大多数设备上兼容。

Live example on the jsFiddle

button {
	clear: both;
	background-color: #aaa;
	border: 0 none;
	border-radius: 4px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	margin: 10px 0px 10px 0;
	padding: 0 22px;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;
	width: auto;
}
input {
	display: block;
	width: 100%;
	padding: 8px 0;
	text-indent: 2%;
}

<table>
    <tr>
        <td><input type="text" placeholder="name@name.com" /></td>
        <td><button>Send</button></td>
    </tr>
</table>

Answer 2

我对内联元素的代码进行了一些更改：

#mc_embed_signup .button {
	clear: both;
	background-color: #aaa;
	border: 0 none;
	border-radius: 4px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	/*margin: 10px 0px 10px 0;*/
	/*padding: 0 22px;*/
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;
	/*width: auto;*/
}
#mc_embed_signup .mc-field-group input {
	/*display: block;*/
	/*width: 100%;*/
	/*padding: 8px 0;*/
	text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
	border-color: #6B0505;
}
#mc_embed_signup input {
	border: 1px solid #999;
	-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
	display: block;
	margin-bottom: 3px;
}
#mce-EMAIL{
    padding: 8px 0;
    display: inline-block;
    width: 70%;
}
#mc-embedded-subscribe{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

<!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
                    <label for="mce-EMAIL">Email Addresse </label>
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name@domain.de">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
                </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>    <!-- 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;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->

http://jsfiddle.net/mitsuru/3Lusbvjx/1/

您应该将提交输入放在来自输入的电子邮件附近，然后 % 中的“inline-block”和“width”会发挥作用。

它不使用表格，!importants，也不需要修复或应用技巧。这只是 CSS。

干杯。