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：

.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中添加此内容

first name | lastname | language_known
sakthi     | vel      | English
hari       | Prasath  | Chinese
Varun      | Kumar    | English

Answer 2

您可以尝试应用css规则 display：对这些输入字段的内联块。

使用此功能，您将允许其他元素位于其左侧和右侧，此外，您可以将边距和填充应用于元素并应用宽度和高度值。

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规则显示：inline-block应用于这些输入字段。

显示：内联;

Answer 6

在display:inline-block中使用box-sizing:border-box以及input, textarea，因为当您从左右方向填充10px时，width:100%则实际宽度为{{} 1}}。使用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;
}

如何在同一行上放置2个输入字段？

6 个答案: