html表单-使输入显示在同一行上
html表单-使输入显示在同一行上
提问于 2013-08-28 00:15:20
我正在努力让两个html表单输入(名字和姓氏)并排出现在同一行上。我尝试过使用float，但这似乎使其余的输入无处不在。任何建议都将非常感谢--以下是我的代码：
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 Demo。
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-08-28 00:30:37
您可以将以下内容包装在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>在你的CSS中给每个输入float:left：
.your-class input{
float:left;
}仅供示例
您可能需要调整边距。
记住对".your-class"之后的任何内容应用clear:left或两者
Stack Overflow用户
发布于 2013-09-06 07:18:31
将多个表单元素包装在一个div中，该类使用
display: table 在div内部，使用一个类将每个label和input包装在divs中
display: table-cell离floats远点！
Stack Overflow用户
发布于 2017-05-17 16:44:57
一种更现代的解决方案：
使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18470682
复制相关文章
相似问题