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

Question

I've actually never coded in html or css before so I'm a bit confused here. I have an embedded email sign up form that has three fields: Email Address, First Name, and Last Name. I would like first name and last name to show up in the same line so it's only two lines. I put both of them in the same div and nothing changed. Here is the HTML code with what I think is CSS embedded in it.

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

Adding flex property to name_wrapper class brings every children of name_wrapper to default flex-row. So Label, Input field of first name and last name will be align in one line side-by-side. Change Styling according to your preferences.

 .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

You can use any of the snippets below. remember that you should add your css below the where you've added and external CSS file so you can overwrite the styles. the second snippet has more flexibility for I have removed the email class from the name fields.

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

Add this css only

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

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

your output look like