2つの入力フィールドを同じ行に配置するにはどうすればよいですか？

Question

私の連絡先フォームでは、入力フィールドの姓と名を同じ行に並べて配置したいと思います。それを行う最善の方法は何でしょうか？ 多くのおかげで、

は

HTML

<div class="contact-container clearfix"> 
    <form class="clearfix" id="contactfrm" method="post" name="contactfrm"> 
    <input class="_input-1 floatlabel input-40px" id="first_name" name="first_name" placeholder="Your first name" type="text"> 
    <input class="_input-1 floatlabel input-40px" id="last_name" name="last_name" placeholder="Your last name" type="text"> 
    <input class="_input-2 floatlabel" id="email" name="email" placeholder="Votre adresse e-mail" type="email"> 
    <textarea class="floatlabel" id="message" name="message" placeholder="Votre message et votre numéro de téléphone"></textarea> 
    <button class="wow fadeInUp" name="submit" type="submit" value="Envoyer"><i class="fa fa-sign-in"></i> SEND&nbsp;</button> 

    </form> 
    </div> 

CSS https://jsfiddle.net/xrx89Lr0/

参照してください：

.contact-container { 
    position: relative; 
    width: 90%; 
    margin-right: auto; 
    margin-left: auto; 
} 

form { 
    left: 0; 
    /* margin: 35px auto auto; */ 
    position: relative; 
    right: 0; 
    width: 80%; 
    max-width: 600px; 
    margin: auto; 
    margin-top: 50px; 
} 

input, 
textarea { 
    display: block; 
    width: 100%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-right: 10px; 
    padding-left: 10px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-color: #d9d9d9; 
    border-right-color: #d9d9d9; 
    border-bottom-color: #d9d9d9; 
    border-left-color: #d9d9d9; 
    border-top-style: dotted; 
    border-right-style: dotted; 
    border-bottom-style: dotted; 
    border-left-style: dotted; 
    background-color: #efefef; 
    line-height: 1.38; 
    color: #444444; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    animation-direction: alternate; 
    -moz-animation-direction: alternate; 
    -webkit-animation-direction: alternate; 
    -o-animation-direction: alternate; 
    /*border: 2px solid #EFEFEF;*/ 
} 

.input-40px, 
.textarea-40px { 
    width: 40% !important; 
} 

form input:focus, 
form textarea:focus { 
    border: 1px solid #b9e22d; 
} 

.contact-container ._input-1 { 
    height: 38px; 
    margin-top: 17px; 
} 

.contact-container ._input-2 { 
    height: 38px; 
    margin-top: 32px; 
} 

.contact-container ._input-3 { 
    height: 150px; 
    margin-top: 32px; 
} 

textarea { 
    height: 150px; 
    margin-top: 32px; 
} 

Answer 1

cssルール display：inline-blockをこれらの入力フィールドに適用して試すことができます。

これで、他の要素を左右に置くことができます。また、余白やパディングを要素に適用し、幅と高さの値を適用できます。

Answer 2

CSSでこれを追加し

input, textarea { 
display: inline-block; 
} 

Answer 3

このスタイルを使用することもできます。インラインブロックを、それらの入力フィールドに：

.contact-container ._input-1 { float: left; margin-bottom: 20px; } 
.input-40px, .textarea-40px { width: 44% !important; } 
input, textarea { width: 95%; margin-right: 0; margin-left: 0; } 

Answer 4

.input-40px{display:inline-block;} 

Answer 5

あなたは、CSSルールの表示を適用することで試すことができます。

display：inline;

Answer 6

使用display:inline-blockなどinput, textareaでbox-sizing:border-boxあなたは左と右とwidth:100%からパディング10pxを与えたときに、実際の幅は100% + 20pxあるとして。 box-sizing:border-boxを使用すると、パディングの幅とマージがマージされ、パディング後も100%のままになります。

.contact-container { 
 
    position: relative; 
 
    width: 90%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
form { 
 
    left: 0; 
 
    /* margin: 35px auto auto; */ 
 
    position: relative; 
 
    right: 0; 
 
    width: 80%; 
 
    max-width: 600px; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
} 
 
input, 
 
textarea { 
 
    display: inline-block; 
 
    box-sizing:border-box; 
 
    width: 100%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    border-top-width: 1px; 
 
    border-right-width: 1px; 
 
    border-bottom-width: 1px; 
 
    border-left-width: 1px; 
 
    border-top-color: #d9d9d9; 
 
    border-right-color: #d9d9d9; 
 
    border-bottom-color: #d9d9d9; 
 
    border-left-color: #d9d9d9; 
 
    border-top-style: dotted; 
 
    border-right-style: dotted; 
 
    border-bottom-style: dotted; 
 
    border-left-style: dotted; 
 
    background-color: #efefef; 
 
    line-height: 1.38; 
 
    color: #444444; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    animation-direction: alternate; 
 
    -moz-animation-direction: alternate; 
 
    -webkit-animation-direction: alternate; 
 
    -o-animation-direction: alternate; 
 
    /*border: 2px solid #EFEFEF;*/ 
 
} 
 
.input-40px, 
 
.textarea-40px { 
 
    width: 49% !important; 
 
} 
 
form input:focus, 
 
form textarea:focus { 
 
    border: 1px solid #b9e22d; 
 
} 
 
.contact-container ._input-1 { 
 
    height: 38px; 
 
    margin-top: 17px; 
 
} 
 
.contact-container ._input-2 { 
 
    height: 38px; 
 
    margin-top: 32px; 
 
} 
 
.contact-container ._input-3 { 
 
    height: 150px; 
 
    margin-top: 32px; 
 
} 
 
textarea { 
 
    height: 150px; 
 
    margin-top: 32px; 
 
}

<div class="contact-container clearfix"> 
 
    <form class="clearfix" id="contactfrm" method="post" name="contactfrm"> 
 
    <input class="_input-1 floatlabel input-40px" id="first_name" name="first_name" placeholder="Your first name" type="text"> 
 
    <input class="_input-1 floatlabel input-40px" id="last_name" name="last_name" placeholder="Your last name" type="text"> 
 
    <input class="_input-2 floatlabel" id="email" name="email" placeholder="Votre adresse e-mail" type="email"> 
 
    <textarea class="floatlabel" id="message" name="message" placeholder="Votre message et votre numéro de téléphone"></textarea> 
 
    <button class="wow fadeInUp" name="submit" type="submit" value="Envoyer"><i class="fa fa-sign-in"></i> SEND&nbsp;</button> 
 

 
    </form> 
 
</div>