html-Formular - Eingaben werden in derselben Zeile angezeigt

Ich bin kämpfen, um zwei html-Formular Eingaben (Nachname, Vorname) erscheinen auf der gleichen Zeile nebeneinander. Ich habe versucht mit float, aber das scheint ja auch der rest der Eingänge gehen Sie überall. Jede Beratung wäre sehr geschätzt - hier ist mein 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;
}

Hier ist die JSBin-Demo.

InformationsquelleAutor der Frage Pectus Excavatum | 2013-08-27

  1. 18

    Können Sie wickeln Sie den folgenden in einer 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>

    Geben Sie jedem Eingang float:left in Ihre CSS:

    .your-class input{
  float:left;
}

    Beispiel nur

    Müssen Sie möglicherweise anpassen Margen.

    Erinnern zu gelten clear:left oder beide, alles was danach kommt ".your-class"

    InformationsquelleAutor der Antwort Alex

  2. 23

    http://www.w3schools.com/cssref/pr_class_display.asp
    Wickeln Sie Ihre mehrere Formular-Elemente in einem div mit einer Klasse zu, die mit display:table. Innerhalb dieses div-wrap für jedes label und input, die in divs mit einer Klasse zu, die mit display:table-cell. Bleiben Sie Weg von den Schwimmern!

    InformationsquelleAutor der Antwort Mlasell

  3. 1

    Versuchen Sie einfach, indem ein div um den ersten und letzten Namen-Eingänge/- Beschriftungen wie diese:

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

    Blick auf die Geige hier: http://jsfiddle.net/XAkXg/

    InformationsquelleAutor der Antwort meub

  4. 1

    Tabelle

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

    InformationsquelleAutor der Antwort Mahmoud Samy

Schreibe einen Kommentar