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

Question

我已经创建了标准的 mailchimp 表单，它垂直显示表单元素。我想让它们并排放置，以便电子邮件文本输入字段位于同一行的提交输入字段旁边。

不幸的是，我似乎找不到正确的选择器。 <强> JSFiddle 演示

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

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

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%;，所以两个input之间有空格)