biểu mẫu html - làm cho dữ liệu nhập xuất hiện trên cùng một dòng

Question

Tôi đang cố gắng tạo hai đầu vào dạng html (tên và họ) xuất hiện trên cùng một dòng cạnh nhau. Tôi đã thử sử dụng phao, nhưng điều đó dường như làm cho phần còn lại của các yếu tố đầu vào đi khắp mọi nơi. Bất kỳ lời khuyên sẽ được đánh giá rất nhiều - đây là mã của tôi:

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

Đây là JSBin Demo.

Answer 1

Bạn có thể bao gồm những điều sau đây trong 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> 

Cung cấp cho mỗi đầu vào float:left trong CSS của bạn:

.your-class input{ 
    float:left; 
} 

ví dụ duy nhất

Bạn có thể phải điều chỉnh lợi nhuận.

Hãy nhớ để áp dụng clear:left hoặc cả hai để bất cứ điều gì xảy ra sau khi ".your-class"

Answer 2

Cố gắng chỉ cần đặt một div xung quanh tên đầu tiên và cuối cùng đầu vào/nhãn như thế này:

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

Nhìn vào fiddle đây: http://jsfiddle.net/XAkXg/

Answer 3

bảng sử dụng

<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 Quấn nhiều yếu tố hình thức của bạn trong một div với một lớp có sử dụng display: table. Bên trong div đó, bọc từng nhãn và nhập vào các div với một lớp sử dụng display: table-cell. Tránh xa những phao nổi!

Answer 5

Một giải pháp hiện đại hơn:

Sử dụng display: flex và 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>