Как разместить 2 поля ввода в одной строке?

Question

В моей контактной форме я хотел бы поместить в поле ввода имя и фамилию рядом друг с другом в одной строке. Какой был бы лучший способ сделать это? Большое спасибо,

См https://jsfiddle.net/xrx89Lr0/

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:

.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: встроенный блок для этих полей ввода.

дисплей: встроенный;

Answer 6

использование display:inline-block, а также box-sizing:border-box в input, textarea, как, когда вы даете отступы 10px от левой и правой и width:100% то фактическая ширина 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>