Wie platziere ich zwei Textfelder nebeneinander?

Question

Ich bin ein Formular für eine Zielseite zu schaffen, so möchte ich an Seite das Texteingabefeld Seite zu halten, damit ich nicht die Form sehr long.I machen versuchen, so etwas zu tun:

Aber es scheint jetzt wirklich schwierig, das ist, was aktuelle meine Form wie folgt aussieht:

.teaser-right { 
 
    float: right; 
 
    width: 45%; 
 
    margin: 3% 0 0 0 
 
} 
 

 
#calltoaction-form { 
 
    background: #f2f2f2; 
 
    padding-bottom: 10px; 
 
    width: 800px; 
 
    position: right; 
 
    bottom: 0 
 
}

<div id="calltoaction-form" class="teaser-form"> 
 
    <div class="form-title"> 
 
    <h3>sample form</h3> 
 
    </div> 
 
    <form id="contact_form" action="_contact-us.php" method="post"> 
 
    <div class="form-header"> 
 
     <h4>Personal details</h4> 
 
    </div> 
 
    <div class="form-section"> 
 
     <input id="name" name="name" type="text" placeholder="Your name"> 
 
    </div> 
 
    <div class="form-section"> 
 
     <input id="email" name="email" type="text" placeholder="Your email"> 
 
    </div>

Answer 1

diese zu Ihrem CSS hinzufügen:

.form-section{ 
    display:inline-block; 
} 

Answer 2

Um 2 Eingabefelder nebeneinander zu setzen, können Sie float verwenden. Wenn Sie die Elemente schweben lassen, müssen Sie sicherstellen, dass Sie den Clearfix-Hack auf dem Eltern-Div verwenden. Andernfalls wird das Eltern-Div keine Höhe haben.

Eine andere Option ist die Verwendung display: inline-block Wenn Sie Display Inline-Block verwenden, müssen Sie die Schriftgröße auf dem Eltern auf 0 zurücksetzen. Die Elemente, die Sie verwenden Display: Inline-Block müssen die font-size: 12px; zum Beispiel erhalten. Mit Display Inline-Block können Sie einen leichten Höhenunterschied erhalten.

Beispiel:

float: left; 

https://jsfiddle.net/ymma61hu/3/

Clearfix Kerbe:

https://css-tricks.com/snippets/css/clear-fix/

Beispiel 2:

display: inline-block; 

https://jsfiddle.net/vh49gtzL/

Answer 3

Hallo, nur Eingabeelemente innerhalb derselben div siehe Geige. https://jsfiddle.net/v5omym1a/

<div id="calltoaction-form" class="teaser-form"> 
    <div class="form-title"> 
    <h3>sample form</h3> 
    </div> 
    <form id="contact_form" action="_contact-us.php" method="post"> 
    <div class="form-header"> 
     <h4>Personal details</h4> 
    </div> 
    <div class="form-section"> 
     <input id="name" name="name" type="text" placeholder="Your name"> 
     <input id="email" name="email" type="text" placeholder="Your email"> 
    </div> 

Answer 4

reinigte ich Markup ein wenig. Sie müssen nicht Ihre <h3> und <h4> in div -s wickeln - das sind Block-Level-Elemente als auch und kann perfekt gestylt werden.

#calltoaction-form { 
 
    background: #f2f2f2; 
 
    padding-bottom: 10px; 
 
    width: 800px; 
 
    position: right; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
.form-section { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
label { 
 
    display: block; 
 
    margin-bottom: .25em; 
 
}

<div id="calltoaction-form" class="teaser-form"> 
 
    <h3 class="form-title">sample form</h3> 
 

 
    <form id="contact_form" action="_contact-us.php" method="post"> 
 

 
     <h4 class="form-header">Personal details</h4> 
 

 
     <div class="form-section"> 
 
     <label for="name">Name</label> 
 
     <input id="name" name="name" type="text" placeholder="Your name"> 
 
     </div> 
 

 
     <div class="form-section"> 
 
     <label for="email">Email</label> 
 
     <input id="email" name="email" type="text" placeholder="Your email"> 
 
     </div> 
 

 
    </form> 
 
    </div>

Answer 5

.form-section { 
 
     float: left; 
 
     margin: 1%; 
 
     width: 48.5%; 
 
    } 
 
    .form-section input { 
 
    width: 100%; 
 
    } 
 
    .form-section:first-child { 
 
    margin-left: 0; 
 
    } 
 
    .form-section:last-child { 
 
    margin-right: 0; 
 
    } 
 
#calltoaction-form { 
 
    background: #f2f2f2; 
 
    padding-bottom: 10px; 
 
    width: 100%; 
 
    position: right; 
 
    bottom: 0 
 
}

<div id="calltoaction-form" class="teaser-form"> 
 
    <div class="form-title"> 
 
    <h3>sample form</h3> 
 
    </div> 
 
    <form id="contact_form" action="_contact-us.php" method="post"> 
 
    <div class="form-header"> 
 
     <h4>Personal details</h4> 
 
    </div> 
 
    <div class="form-container"> 
 
     <div class="form-section"> 
 
     <input id="name" name="name" type="text" placeholder="Your name"> 
 
     </div> 
 
     <div class="form-section"> 
 
     <input id="email" name="email" type="text" placeholder="Your email"> 
 
     </div> 
 
    </div>