html form - girişler aynı satırda beliriyor

Question

Aynı satırda iki satırlık form girdisi (ilk ve soyadı) görünmek için uğraşıyorum. Şamandıra kullanmayı denedim, ancak bu girdilerin geri kalanının her yere gitmesini sağlıyor. Herhangi bir tavsiye büyük takdir - İşte benim kodudur:

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

#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 olduğunu.

Answer 1

yapabilirsiniz Aşağıdaki şekilde bir DIV:

CSS'nizde her giriş float:left verin: Sen kenar boşluklarını ayarlamak gerekebilir sadece

.your-class input{ 
    float:left; 
} 

örneği. tablo:

ekran kullanan bir sınıf ile bir div içinde birden form öğeleri sarın ".your-class"

Answer 2

sadece bu gibi adını ve soyadını etrafında giriş/etiket bir div koyarak deneyin:

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

bak keman burada: http://jsfiddle.net/XAkXg/

Answer 3

kullanım tablosu

<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 sonra gelirse için clear:left veya her ikisini uygulamak unutmayın. Bu divun içinde, her etiketi ve div içindeki girişleri, display: table-cell kullanan bir sınıfla sarın. Şamandıralardan uzak durun!

Answer 5

bir daha modern çözüm:

display: flex ve 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>