html - 如何将 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 到那些输入字段。

有了这个，您将允许其他元素位于它们的左侧和右侧，此外，您还可以对元素应用边距和填充，并应用宽度和高度值。