html表单 - 使输入显示在同一行上 [英] html form - make inputs appear on the same line

问题描述

我努力使两个html表单输入（名字和姓氏）并排出现在同一行上。我尝试过使用float，但这似乎使其余的输入无处不在。任何建议将不胜感激 - 这里是我的代码：

HTML：

<预class =lang-html prettyprint-override> < form action =includes / contact.phpmethod =post>

< label for =First_Name>名字：< / label>
< input name =first_nameid =First_Nametype =text/>
< label for =名称>姓氏：< / label>
< input name =last_nameid =Last_Nametype =text/>

< label for =电子邮件>电子邮件：< / label>
< input name =emailid =Emailtype =email/>

< label for =电话>电话：< / label>
< input name =telephoneid =Telephonetype =tel/>

< label for =Wedding>婚宴日期：< / label>
< input name =weddingid =Weddingtype =date/>

< label for =要求>具体要求：< / label>
< textarea name =requirementsid =Requirementsmaxlength =1000cols =25rows =6> < / textarea的>

< input type =submitvalue =Submit/>
< / form>


CSS：

#contactpage form {
overflow：hidden;
display：block;
}

#contactpage表格标签{
margin-top：12px;
font-size：1.15em;
颜色：＃333333;
font-family：'Roboto Condensed'，Helvetica，Arial，sans-serif;
font-weight：normal;
line-height：1.2;
}

#contactpage表单输入{
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;
背景：＃F9F9F9;
font-family：'Helvetica Neue'，Arial，Helvetica，sans-serif;
font-size：1.1em;
line-height：1.4;
padding：6px;
}

#contactpage形式输入[类型= '电子邮件']，
#contactpage形式输入[类型= '电话']，
#contactpage形式输入[ type ='date']，
#contactpage form textarea {
width：94％;
display：block;
背景：＃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;
明确：两者;
display：block;
背景：＃F9F9F9;
颜色：＃333333;
font-size：1.5em;
font-family：'Roboto Condensed'，Helvetica，Arial，sans-serif;
font-weight：300;
font-style：normal;
text-transform：大写;
text-decoration：none;
line-height：1.2;
padding：20px 20px 40px;
}

#contactpage form input [type ='submit']：hover {
color：#FFFFFF;
背景：＃f1bdb5;
}


以下是 JSBin演示

解决方案

可以包装在一个DIV以下内容：

 < div class =your-class> 
 
< label for =First_Name>名字：< / label> 
< input name =first_nameid =First_Nametype =text/> 
< label for =名称>姓氏：< / label> 
< input name =last_nameid =Last_Nametype =text/> 
 
< / div> 
  

在您的每个输入中输入 float：left CSS：

 。您的类输入{
 float：left; 
} 
  

仅示例

您可能需要调整页边距

记住适用明确：左或两者无论发生什么事之后。your-class

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:

<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;
}

Here is the JSBin Demo.

解决方案

You can wrap the following in a 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:left in your CSS:

.your-class input{
  float:left;
}

example only

You might have to adjust margins.

Remember to apply clear:left or both to whatever comes after ".your-class"

这篇关于html表单 - 使输入显示在同一行上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！