我正在努力让两个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:
#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;
}
这里是JSBin演示。
display:inline-block
替代float
。 - Vucko