如何在一行中添加兩個文本輸入字段

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;
}

你的輸出看起來像