如何在一行中添加两个文本输入字段

Question

实际上，我以前从未用 html 或 css 编码过，所以我在这里有点困惑。 我有一个嵌入式电子邮件注册表单，其中包含三个字段：电子邮件地址、名字和姓氏。 我希望名字和姓氏显示在同一行中，因此只有两行。 我把它们都放在同一个 div 中，没有任何改变。 这是我认为嵌入了 CSS 的 HTML 代码。

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* 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="https://xxxxxxx.us4.list-manage.com/subscribe/post?u=b1b3c1385522faa67b172235f&amp;id=9fc3ae428b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <label for="mce-EMAIL">Keep up to date on the latest posts?</label>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- 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_b1b3c1385522faa67b172235f_9fc3ae428b" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

Answer 1

将 flex 属性添加到 name_wrapper 类会将 name_wrapper 的每个子项带到默认的 flex-row。 所以标签，名字和姓氏的输入字段将并排在一行中。 根据您的喜好更改样式。

 .name_wrapper { display: flex; margin: 10px 0; } .email_wrapper { display: flex; } label { font-size: 20px; } input { padding: 8px; border-radius: 12px; margin: 10px; border:none; border: 1px solid black; }

 <form> <div class="name_wrapper"> <lable for=first_name "">Enter Name: <lable/> <input class="first_name" id="first_name" type="text" placeholder="First Name"> <input class="last_name" id="last_name" type="text" placeholder="Last Name"> </div> <div class="email_wrapper"> <lable for=email "">Enter Name: <lable/> <input class="email" id="email" type="email" placeholder="Email"> </div> </form>

Answer 2

您可以使用以下任何片段。 请记住，您应该在添加的位置下方添加 css 和外部 CSS 文件，以便您可以覆盖样式。 第二个片段具有更大的灵活性，因为我从名称字段中删除了电子邮件类。

 <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* 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. */ #mc_embed_signup input.name{ display: inline; width: auto; } </style> <div id="mc_embed_signup"> <form action="https://xxxxxxx.us4.list-manage.com/subscribe/post?u=b1b3c1385522faa67b172235f&amp;id=9fc3ae428b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <label for="mce-EMAIL">Keep up to date on the latest posts?</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <input type="text" value="" name="firstName" class="email name" id="mce-EMAIL" placeholder="first name" required> <input type="text" value="" name="lastname" class="email name" id="mce-EMAIL" placeholder="last name" required> <!-- 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_b1b3c1385522faa67b172235f_9fc3ae428b" tabindex="-1" value=""> </div> <div class="clear"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </div> </form> </div> <!--End mc_embed_signup-->

 <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } #mc_embed_signup input.name{ padding: 10px; border-radius: 3px; margin-bottom: 10px; font:14px Helvetica,Arial,sans-serif; } </style> <div id="mc_embed_signup"> <form action="https://xxxxxxx.us4.list-manage.com/subscribe/post?u=b1b3c1385522faa67b172235f&amp;id=9fc3ae428b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <label for="mce-EMAIL">Keep up to date on the latest posts?</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <input type="text" value="" name="firstName" class="name" id="mce-EMAIL" placeholder="first name" required> <input type="text" value="" name="lastname" class="name" id="mce-EMAIL" placeholder="last name" required> <!-- 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_b1b3c1385522faa67b172235f_9fc3ae428b" tabindex="-1" value=""> </div> <div class="clear"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </div> </form> </div> <!--End mc_embed_signup-->

Answer 3

仅添加此 css

#mc_embed_signup_scroll > div {
    position: relative !important;
    left: 0 !important;
    display: inline-block;
}

#mc_embed_signup_scroll > div.clear {
    display: block;
}

你的输出看起来像