带有并排输入字段的HTML表单 [英] HTML form with side by side input fields
本文介绍了带有并排输入字段的HTML表单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个基本上是垂直的html表单,但是我真的不知道如何在同一行上制作两个文本字段。例如,下面的下面的表格我要在同一行上使用名字和姓氏,而不是在另一行下面。
I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
推荐答案
div的默认显示样式为块。
The default display style for a div is "block." This means that each new div will be under the prior one.
您可以:
覆盖流样式
或
更改您的html以将除div之外的其他内容用作元素您要在同一行上。我建议您只将 last_name字段的div忽略掉
Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
这篇关于带有并排输入字段的HTML表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文