如何将两个文本字段并排放置？

Question

我创建的登陆页的形式，所以我想保持并排文本输入框边，所以我不作形式非常long.I试图做这样的事情：

但现在看来真的很难，这就是我目前的形式是这样的：

.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

添加到您的CSS：

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

Answer 2

要将2个输入字段放在彼此的旁边，您可以使用float。如果您需要浮动元素，请确保在父div上使用clearfix hack。否则，父div不会有高度。

另一种选择是使用display: inline-block如果使用display inline-block，则需要将父级的字体大小重置为0.使用的元素display：inline-block需要获取font-size: 12px;。通过显示内嵌块，您可以获得轻微的高度差。

实施例：

float: left; 

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

Clearfix劈：

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

实施例2：

display: inline-block; 

https://jsfiddle.net/vh49gtzL/

Answer 3

嗨，只是把输入元素在同一个div内看到小提琴。 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

我清理了你的标记了一下。您不需要将<h3>和<h4>包装在div -s - 这些也是块级元素，并且可以完美地设计。

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