html 表单 - 使输入出现在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18470682/
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 - make inputs appear on the same line
提问by Pectus Excavatum
I am struggling to make two html form inputs (first and last name) appear on the same line side by side. I have tried using float, but that seems to make the rest of the inputs go everywhere. Any advise would be greatly appreciated - here is my code:
我正在努力使两个 html 表单输入（名字和姓氏）并排出现在同一行上。我试过使用浮动，但这似乎使其余的输入无处不在。任何建议将不胜感激 - 这是我的代码：
HTML:
HTML：
<form action="includes/contact.php" method="post">
<label for="First_Name">First Name:</label>
<input name="first_name" id="First_Name" type="text" />
<label for="Name">Last Name:</label>
<input name="last_name" id="Last_Name" type="text" />
<label for="Email">Email:</label>
<input name="email" id="Email" type="email" />
<label for="Telephone">Telephone:</label>
<input name="telephone" id="Telephone" type="tel" />
<label for="Wedding">Wedding Date:</label>
<input name="wedding" id="Wedding" type="date" />
<label for="Requirements">Specific Requirements:</label>
<textarea name="requirements" id="Requirements" maxlength="1000" cols="25" rows="6"> </textarea>
<input type="submit" value="Submit"/>
</form>
CSS:
CSS：
#contactpage form {
overflow: hidden;
display: block;
}
#contactpage form label {
margin-top:12px;
font-size: 1.15em;
color: #333333;
font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 1.2;
}
#contactpage form input {
border: 1px solid #DDDDDD;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
}
#contactpage form input[type='text'] {
width: 22%;
display: inline!important;
background: #F9F9F9;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.4;
padding: 6px;
}
#contactpage form input[type='email'],
#contactpage form input[type='tel'],
#contactpage form input[type='date'],
#contactpage form textarea {
width: 94%;
display: block;
background: #F9F9F9;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.4;
padding: 6px;
}
#contactpage form input[type='submit'] {
float:right;
clear:both;
display: block;
background: #F9F9F9;
color: #333333;
font-size: 1.5em;
font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
font-weight: 300;
font-style: normal;
text-transform: uppercase;
text-decoration: none;
line-height: 1.2;
padding: 20px 20px 40px;
}
#contactpage form input[type='submit']:hover {
color: #FFFFFF;
background: #f1bdb5;
}
Here is the JSBin Demo.
这是JSBin 演示。
采纳答案by Alessandro
You can wrap the following in a DIV:
您可以将以下内容包装在 DIV 中：
<div class="your-class">
<label for="First_Name">First Name:</label>
<input name="first_name" id="First_Name" type="text" />
<label for="Name">Last Name:</label>
<input name="last_name" id="Last_Name" type="text" />
</div>
Give each input float:leftin your CSS:
float:left在 CSS 中给出每个输入：
.your-class input{
float:left;
}
example only
仅举例
You might have to adjust margins.
您可能需要调整边距。
Remember to apply clear:leftor both to whatever comes after ".your-class"
记住申请clear:left或两者都适用于之后的任何事情".your-class"
回答by Mlasell
回答by zurfyx
A more modern solution:
更现代的解决方案：
Using display: flexand flex-direction: row
使用display: flex和flex-direction: row
form {
display: flex; /* 2. display flex to the rescue */
flex-direction: row;
}
label, input {
display: block; /* 1. oh noes, my inputs are styled as block... */
}<form>
<label for="name">Name</label>
<input type="text" id="name" />
<label for="address">Address</label>
<input type="text" id="address" />
<button type="submit">
Submit
</button>
</form>回答by Mahmoud Samy
use table
使用表
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><label for="First_Name">First Name:</label></td>
<td><input name="first_name" id="First_Name" type="text" /></td>
<td><label for="last_name">Last Name:</label></td> <td>
<input name="last_name" id="Last_Name" type="text" /></td>
</tr>
<tr>
<td colspan="2"><label for="Email">Email:</label></td>
<td colspan="2"><input name="email" id="Email" type="email" /></td>
</tr>
<tr>
<td colspan="4"><input type="submit" value="Submit"/></td>
</tr>
</table>
回答by meub
Try just putting a div around the first and last name inputs/labels like this:
尝试在名字和姓氏输入/标签周围放置一个 div，如下所示：
<div class="name">
<label for="First_Name">First Name:</label>
<input name="first_name" id="First_Name" type="text" />
<label for="Name">Last Name:</label>
<input name="last_name" id="Last_Name" type="text" />
</div>
Look at the fiddle here: http://jsfiddle.net/XAkXg/
看看这里的小提琴：http: //jsfiddle.net/XAkXg/
回答by Prasd Panther
You can make a class for each label and inside it put:
您可以为每个标签创建一个类并在其中放置：
display: inline-block;
And widththe value that you need.
以及width您需要的价值。
