[英]HTML form with side by side input fields
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. 我有一个基本垂直的html表单,但我真的不知道如何在同一行上创建两个文本字段。 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>
Put style="float:left"
on each of your divs: 在每个div上放置
style="float:left"
:
<div style="float:left;">...........
Example: 例:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it: 要将元素放在新行上,请将此div放在它下面:
<div style="clear:both;"> </div>
Of course, you can also create classes in the CSS file: 当然,您也可以在CSS文件中创建类:
.left{
float:left;
}
.clear{
clear:both;
}
And then your html should look like this: 然后你的HTML应该是这样的:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it: 要将元素放在新行上,请将此div放在它下面:
<div class="clear"> </div>
More Info: 更多信息:
The default display style for a div is "block." div的默认显示样式是“block”。 This means that each new div will be under the prior one.
这意味着每个新div都将在前一个div之下。
You can: 您可以:
Override the flow style by using float as @Sarfraz suggests. 使用float覆盖流样式,如@Sarfraz建议的那样。
or 要么
Change your html to use something other than divs for elements you want on the same line. 将你的html更改为在同一行上使用除div之外的其他元素。 I suggest that you just leave out the divs for the "last_name" field
我建议您省略“last_name”字段的div
<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
For the sake of bandwidth saving, we shouldn't include <div>
for each of <label>
and <input>
pair 为了节省带宽,我们不应该为每个
<label>
和<input>
对包含<div>
This solution may serve you better and may increase readability 此解决方案可能会更好地为您服务,并可能提高可读性
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>
The css for above form would be 以上形式的CSS将是
.form > label
{
float: left;
clear: right;
}
.form > input
{
float: right;
}
I believe the output would be as following: 我相信输出结果如下:
You should put the input for the last name into the same div where you have the first name. 您应该将姓氏的输入放在具有名字的同一个div中。
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. 然后,在CSS中给出#user_first_name和#user_last_name高度并将它们浮动到左侧。 For example:
例如:
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements. 我会选择Larry K的解决方案,但是如果你想要块和内联元素的好处,你也可以将显示设置为内联块 。
You can do this in the div tag by inserting: 您可以通过插入以下内容在div标签中执行此操作:
style="display:inline-block;"
Or in a CSS stylesheet with this method: 或者在使用此方法的CSS样式表中:
div { display:inline-block; }
Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-) 希望它有所帮助,但如前所述,我个人会去找Larry K的解决方案;-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.