Formularz html - spraw, aby dane wejściowe pojawiały się w tej samej linii.

Question

Staram się, aby dwa wejścia formularza HTML (imię i nazwisko) pojawiały się w tej samej linii obok siebie. Próbowałem używać float, ale wydaje się, że pozostałe wejścia są wszędzie. Wszelkie doradzać będzie bardzo mile widziane - tu jest mój kodu:

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

Oto JSBin Demo.

Answer 1

Można zawiń w 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> 

Daj każde wejście float:left w CSS:

.your-class input{ 
    float:left; 
} 

przykład tylko

może trzeba dostosować marginesy.

Pamiętaj, aby zastosować zarówno do clear:left lub cokolwiek przychodzi po ".your-class"

Answer 2

Spróbuj tylko wprowadzenie div wokół pierwszej i ostatniej nazwy wejść/etykiety tak:

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

spojrzeć na skrzypcach tutaj: http://jsfiddle.net/XAkXg/

Answer 3

użycie tabeli

<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 owinąć wiele elementów formularza w div z klasą, który używa wyświetlania: tabela. Wewnątrz tego div, zawiń każdą etykietę i wprowadź div z klasą, która używa display: table-cell. Trzymaj się z dala od pływaków!

Answer 5

Bardziej nowoczesne rozwiązanie:

Korzystanie display: flex i 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>