如何将 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

您也可以使用这种样式。

.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 3

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

Answer 4

您可以尝试将 css 规则 display:inline-block 应用于这些输入字段。

显示：内联；

Answer 5

在css中添加这个

input, textarea {
display: inline-block;
}

Answer 6

在input, textarea 中使用display:inline-block 和box-sizing:border-box，因为当您从左右提供填充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>