如何在一行中添加两个文本输入字段
Posted
技术标签:
【中文标题】如何在一行中添加两个文本输入字段【英文标题】：How to add two text input fields in one line 【发布时间】：2020-04-19 17:20:12 【问题描述】：实际上我以前从未编写过 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_signupbackground:#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&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-->
【问题讨论】：
【参考方案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>【讨论】：
【参考方案2】：您可以使用以下任何 sn-ps。请记住，您应该在添加的位置和外部 CSS 文件下方添加您的 css，以便您可以覆盖样式。第二个 sn-p 具有更大的灵活性，因为我已从名称字段中删除了电子邮件类。
<!-- 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_signupbackground:#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&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_signupbackground:#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&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-->【讨论】：
【参考方案3】：仅添加此 CSS
#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
【讨论】：
以上是关于如何在一行中添加两个文本输入字段的主要内容，如果未能解决你的问题，请参考以下文章
添加/删除 UITableView 行时如何防止文本字段变空？
如何在 HTML/CSS 中的输入类型文本字段中添加图标？ [复制]