带有并排输入字段的 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3488447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML form with side by side input fields
提问by Matt Elhotiby
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.
我有一个基本上垂直的 html 表单，但我真的不知道如何在同一行上创建两个文本字段。例如下面的表格我希望名字和姓氏在同一行上，而不是一个在另一个之下。
<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>
采纳答案by Larry K
The default display style for a div is "block." This means that each new div will be under the prior one.
div 的默认显示样式是“块”。这意味着每个新 div 都将位于前一个 div 之下。
You can:
你可以：
Override the flow style by using float as @Sarfraz suggests.
按照@Sarfraz 的建议，使用 float 覆盖流样式。
or
或者
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
更改您的 html 以使用除 div 之外的其他内容作为您想要在同一行上的元素。我建议你把“姓氏”字段的 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
回答by Sarfraz
Put style="float:left"on each of your divs:
放在style="float:left"每个 div 上：
<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:
更多信息：
回答by Le Duc Duy
For the sake of bandwidth saving, we shouldn't include <div>for each of <label>and <input>pair
为了节省带宽，我们不应该<div>为每个<label>和<input>对包括
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:
我相信输出如下：
回答by Mathias Bak
I would go with Larry K's solution, but you can also set the display to inline-blockif 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 的解决方案 ;-)
回答by Arwen
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. For example:
然后，在你的 CSS 中给出你的 #user_first_name 和 #user_last_name 高度并将它们都浮动到左边。例如：
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
