Question

我创建了标准的mailchimp表单，它垂直显示表单元素。我希望它们彼此相邻，以便电子邮件文本输入字段位于同一行的“提交”输入字段旁边。

不幸的是，我似乎无法找到正确的选择器。 JSFiddle 演示

＆＃13;

#mc_embed_signup .mce-EMAIL, #mc_embed_signup .mc-embedded-subscribe, .mc-field-group, #mce-responses, #mce-input1 {
    display: inline-block;
}

＆＃13;

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
    <form action="//farmhelden.us11.list-manage.com/subscribe/post?u=2e8aace70e8db891af7a653f9&amp;id=98d670e415" 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" style="width: 33%; line-height: 1.2">
                <input type="email" value="" placeholder="Email-Adresse..." name="EMAIL" class="required email" id="mce-EMAIL">
            </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>
                <input type="text" name="b_2e8aace70e8db891af7a653f9_98d670e415" tabindex="-1" value="">
            </div>
            <div class="clear">
                <input type="submit" value="Anmelden" name="subscribe" id="mc-embedded-subscribe" style="width: 23%; height: 20px;">
            </div>
        </div>
    </form>
</div>


<!--End mc_embed_signup-->

＆＃13;

Answer 1

您正在混淆ID和类的选择器。 ID选择器以#符号开头，而类选择器以.符号开头。这样就可以了：

#mce-responses {
    display: none;
}

.mc-field-group, #mce-responses + div {
    display: inline-block;
}

<div id="mc_embed_signup">
    <form action="//farmhelden.us11.list-manage.com/subscribe/post?u=2e8aace70e8db891af7a653f9&amp;id=98d670e415" 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" style="width: 33%; line-height: 1.2">
                <input type="email" value="" placeholder="Email-Adresse..." name="EMAIL" class="required email" id="mce-EMAIL">
            </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>
                <input type="text" name="b_2e8aace70e8db891af7a653f9_98d670e415" tabindex="-1" value="">
            </div>
            <div class="clear">
                <input type="submit" value="Anmelden" name="subscribe" id="mc-embedded-subscribe" style="width: 23%; height: 20px;">
            </div>
        </div>
    </form>
</div>


<!--End mc_embed_signup-->

（由于你的内联样式为width: 33%;），两个输入之间有空格

如何水平显示这些输入字段？

1 个答案: