html表單 - 使輸入顯示在同一行

Question

我很努力使兩個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。

Answer 1

你可以將以下內容包裝在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> 

給每個輸入float:left在你的CSS：

.your-class input{ 
    float:left; 
} 

例如僅

您可能必須調整頁邊距。

記住申請clear:left或兩者無論發生什麼事之後".your-class"

Answer 2

儘量只把一個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> 

看小提琴這裏：http://jsfiddle.net/XAkXg/

Answer 3

使用表

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

Answer 4

http://www.w3schools.com/cssref/pr_class_display.asp 包裹在一個div您的多個表單元素與使用顯示器類：表。在div裏面，用一個使用display：table-cell的類包裝每個標籤並輸入到div中。遠離花車！

Answer 5

一個更現代的解決方案：

使用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>