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

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>