如何將兩個文本字段並排放置？

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>