Question

在我的MailChimp表单上，我希望获得表单并相互内联提交按钮。

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

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

＆＃13;

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

＆＃13;

                <!-- 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-->

＆＃13;

Answer 1

在时事通讯中推荐使用＆＃34;旧式＆＃34;代码，<table>和内联样式。如果您使用table可以使表单彼此相邻，并且它将在大多数设备上兼容。

Live example on the jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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”in％做魔术。

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

干杯。

MailChimp Form和Button在同一行

2 个答案: