Question

我有一个由设计师整理的wordpress网站，但我负责更新等。我没有编码经验，只是通过反复试验，研究等方式学习。

我使用html小部件在网站的侧边栏中嵌入了一个MailChimp注册表单。我正在使用CSS编辑器来设置代码/表单的样式。

我遇到的问题是复选框及其标签不能正常排列并且看起来很糟糕。

我似乎无法找到正确使用的属性，而且我真的很喜欢这个并且可以使用一些指导：）

以下是HTML：

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://laszloenergy.us16.list-manage.com/subscribe/post?u=cadefcfd20b919dfe5e667734&amp;id=69d0a8f56b" 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">
	<input type="text" value="" name="FNAME" class="required FNAME" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="LNAME" class="required LNAME" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder ="Email Address">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="MMERGE5" class="" id="mce-MMERGE5" placeholder="Organization">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4" placeholder="Title">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3" placeholder="Sector">
</div>
<div class="mc-field-group input-group">
    <strong>Interests </strong>
    <ul><li><input type="checkbox" value="2" name="group[4095][2]" id="mce-group[4095]-4095-0"><label for="mce-group[4095]-4095-0">Cap and Trade</label></li>
<li><input type="checkbox" value="4" name="group[4095][4]" id="mce-group[4095]-4095-1"><label for="mce-group[4095]-4095-1">Carbon Pricing</label></li>
<li><input type="checkbox" value="8" name="group[4095][8]" id="mce-group[4095]-4095-2"><label for="mce-group[4095]-4095-2">Energy Reporting and Certifications</label></li>
<li><input type="checkbox" value="16" name="group[4095][16]" id="mce-group[4095]-4095-3"><label for="mce-group[4095]-4095-3">Strategic Planning and Implementation</label></li>
<li><input type="checkbox" value="32" name="group[4095][32]" id="mce-group[4095]-4095-4"><label for="mce-group[4095]-4095-4">Facilitation and Engagement</label></li>
</ul>
</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;" aria-hidden="true"><input type="text" name="b_cadefcfd20b919dfe5e667734_69d0a8f56b" tabindex="-1" value=""></div>
    <div class="show"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

以下是CSS：

/* Changes the style of the overall form */
#mc_embed_signup {
    background: rgba(0, 0, 0, 0) !important;
    color: #ffffff;
    padding: 0px;
    text-align: center;
}

/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
    padding: 10px 0;
}

/* Styles the input boxes */
#mc_embed_signup  input {
    width: 200px;
}

/* Styles the subscribe button */
#mc_embed_signup .button {
    background-color: #7fbf69;
    color: #ffffff;
    margin: 0 auto;
}

结果表格： Mailchimp embedded form on Wordpress

Answer 1

尝试删除 text-align：center;

{{1}}

Wordpress.com站点中嵌入的MailChimp表单的复选框和标签对齐方式

1 个答案: