html - 如何在 Mailchimp 嵌入式表单中的同一行获取复选框和文本？

Question

我正在设计带有组的 Mailchimp 表单的样式，并且在无序列表中复选框位于一行而文本位于下一行时遇到问题。你可以在这个页面上看到它:

http://www.warmheartspublishing.com/newsletter/

复选框和文本都在同一个 LI 标记内，所以我不知道为什么文本会被下移到复选框下方。顺便说一下，我正在使用 Genesis 框架。

这是我在 Wordpress 中输入的表单的代码:

<div id="mailchimp">
<form action="//warmheartspublishing.us13.list-manage.com/subscribe/post?u=74d56fdb848e8be499cc4df0e&amp;id=fd37fb691f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p style="text-align: center;">Sign up to get news on sales, products, and freebies</p>
<div class="indicates-required" style="font-size: 10px;"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">


<input type="text" value="First Name" name="FNAME" class="" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>

<div class="mc-field-group">
    <input type="text" value="Last Name" name="LNAME" class="" id="mce-LNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div class="mc-field-group">
    <input type="email" value="E-mail Address *" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div class="mc-field-group input-group">
    <p>What areas are you interested in? </p>
    <ul><li><input type="checkbox" value="1" name="group[2381][1]" id="mce-group[2381]-2381-0"><label for="mce-group[2381]-2381-0">Early Learning</label></li>
<li><input type="checkbox" value="2" name="group[2381][2]" id="mce-group[2381]-2381-1"><label for="mce-group[2381]-2381-1">Kindergarten</label></li>
<li><input type="checkbox" value="4" name="group[2381][4]" id="mce-group[2381]-2381-2"><label for="mce-group[2381]-2381-2">Grades 1 - 3</label></li>
<li><input type="checkbox" value="8" name="group[2381][8]" id="mce-group[2381]-2381-3"><label for="mce-group[2381]-2381-3">Grades 4 - 6</label></li>
<li><input type="checkbox" value="16" name="group[2381][16]" id="mce-group[2381]-2381-4"><label for="mce-group[2381]-2381-4">Grades 7 - 8</label></li>
<li><input type="checkbox" value="32" name="group[2381][32]" id="mce-group[2381]-2381-5"><label for="mce-group[2381]-2381-5">Grades 9 - 12</label></li>
<li><input type="checkbox" value="64" name="group[2381][64]" id="mce-group[2381]-2381-6"><label for="mce-group[2381]-2381-6">Language Arts</label></li>
<li><input type="checkbox" value="128" name="group[2381][128]" id="mce-group[2381]-2381-7"><label for="mce-group[2381]-2381-7">Math</label></li>
<li><input type="checkbox" value="256" name="group[2381][256]" id="mce-group[2381]-2381-8"><label for="mce-group[2381]-2381-8">Science</label></li>
<li><input type="checkbox" value="512" name="group[2381][512]" id="mce-group[2381]-2381-9"><label for="mce-group[2381]-2381-9">History &amp; Geography</label></li>
<li><input type="checkbox" value="1024" name="group[2381][1024]" id="mce-group[2381]-2381-10"><label for="mce-group[2381]-2381-10">Foreign Language</label></li>
<li><input type="checkbox" value="2048" name="group[2381][2048]" id="mce-group[2381]-2381-11"><label for="mce-group[2381]-2381-11">Music &amp; Drama</label></li>
<li><input type="checkbox" value="4096" name="group[2381][4096]" id="mce-group[2381]-2381-12"><label for="mce-group[2381]-2381-12">Visual Arts</label></li>
<li><input type="checkbox" value="8192" name="group[2381][8192]" id="mce-group[2381]-2381-13"><label for="mce-group[2381]-2381-13">Phy. Ed. &amp; Health</label></li>
<li><input type="checkbox" value="16384" name="group[2381][16384]" id="mce-group[2381]-2381-14"><label for="mce-group[2381]-2381-14">Religious</label></li>
<li><input type="checkbox" value="32768" name="group[2381][32768]" id="mce-group[2381]-2381-15"><label for="mce-group[2381]-2381-15">Everything</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_74d56fdb848e8be499cc4df0e_fd37fb691f" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
<p style="font-size: 12px;">We respect your privacy</p>
</form>
</div>

这是 Mailchimp 表单的 CSS 设置:

#mailchimp {
    background: #ffffff;
    color: #F23D4F;
    padding: 20px 15px;
    border-style: solid;
    border-color: #F23D4F;
    width: 335px;
}
#mailchimp input {
    border-style: solid;
        border-width: 1px;
    border-color: #F23D4F;
        margin-bottom: 10px;
        padding: 8px 10px;
        width: 300px;
    background-color: #FFFFFF;
    color: #000;
    font-size: 10px;

}

#mailchimp input[type="submit"] {
    background: #F23D4F;
    color: #fff;
    border-style: solid;
    border-color: #F23D4F;
    cursor: pointer;
    font-size: 15px;
    width: 35%;
    padding: 8px 0;

        }
#mailchimp input[type="submit"]:hover { 
    color: #F23D4F;
    background: #ffffff;
    border-style: solid;
    border-color: #F23D4F;
}

#mailchimp div.mc-field-group.input-group ul li {
    list-style-type: none;

}

这是它正在做的事情的图片。

Answer 1

你改变这个 CSS 规则

#mailchimp div.mc-field-group.input-group ul li {
    list-style-type: none;
    white-space: nowrap;                                    /* added */
}