表单输入元素大小调整

Question

我想制作一个两列布局形式。但我遇到了一个问题，即形式的输入元素在大小（宽度）上没有平均分配，也有响应。 我希望它具有响应性，同样宽度与它们之间的差距。

以下附加代码

@import url('https://fonts.googleapis.com/css?family=Montserrat');

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
input[type="text"]{
  display: block;
  height: 30px;
  width: 47%;
  float:left;
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}

<section id="contact-page">
  
  <form>
  <h2>Contact Us</h2>
  <input type="text" placeholder="Name">
   
  <input type="text" placeholder="E-mail">
   
  <textarea name="message" placeholder="Message" rows="6"></textarea>
    
  </form>
</section>

Answer 1

试试这个

 <form>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="text" name="" class="form-control">
    </div>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="email" name="" class="form-control">
    </div>
    <div class="col-sm-12 form-group">
        <textarea name="" cols="" rows="10" class="form-control"></textarea>
    </div>
<form>

只需将其添加到表单部分，并添加botstrap所需的文件

1- Jquery

2- Bootsrap.min.css

Bootsrap Documentation

JS fiddle

Answer 2

如果可能的话，使用Bootstrap with Grids，如果不是简单的解决方案将添加如下div：

Bootstrap Grid LinK：https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

<form>
      <h2>Contact Us</h2>
      <div>
      <input type="text" placeholder="Name">
      </div>
      <div>
      <input type="text" placeholder="E-mail">
      </div>
      <textarea name="message" placeholder="Message" rows="6"></textarea>

      </form>

Answer 3

删除float的{​​{1}}并添加包装div，如下所示

＆＃13;

＆＃13;

input

＆＃13;

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
#email{
  display: block;
  height: 30px;
  width: 30%;
  float:left;
  margin:0;
  margin-left:2%;
}
#name{
  display: block;
  height: 30px;
  width: 30%;
 
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

您的选择器form > input:nth-child(3)是一个问题，因为它将h2计为第一个，使电子邮件输入成为第三个并为其添加左边距。

一旦消失，我将margin: 30px 0;添加到现有input['text']选择器，以匹配您应用于textarea的内容，并且您可能需要不同的值，但所有内容都排成一行并均匀分布：

JS Fiddle

Answer 5

示例：

＆＃13;

＆＃13;

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
#email{
  display: block;
  height: 30px;
  width: 30%;
  float:left;
  margin:0;
  margin-left:2%;
}
#name{
  display: block;
  height: 30px;
  width: 30%;
  float:left;
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}

＆＃13;

<section id="contact-page">
  
  <form>
  <h2>Contact Us</h2>
  <input type="text" placeholder="Name" id='name'>
   
  <input type="text" placeholder="E-mail" id='email'>
   
  <textarea name="message" placeholder="Message" rows="6"></textarea>
    
  </form>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 6

好吧！我试图弄清楚你的问题，并试着让它变得敏感。

Max-width and Max-height

max-width 属性用于设置元素的最大宽度。

最大宽度可以在长度值中指定，如px，cm等，或以百分比（％）表示，或设置为无（这是默认值。表示没有最大宽度）

使用 max-width 代替，在这种情况下，将改善浏览器对小窗口的处理。类似于身高

如果您不希望以内容为中心，可以删除margin: 0 auto;

@import url('https://fonts.googleapis.com/css?family=Montserrat');
h2 {
  white-space: auto;
  font-family: Montserrat;
  font-size: 3em;
  line-height: 50px;
  ;
}

form {
  width: 70%;
  margin: 0 auto;
}

input[type="text"] {
  max-height: 30px;
  max-width: 47%;
}

textarea {
  max-width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}

input[placeholder="Name"],
input[placeholder="E-mail"] {
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
  margin-bottom: 10px;
}

textarea[placeholder="Message"] {
  letter-spacing: 5px;
  padding: 10px;
  font-family: Montserrat;
}


/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/

form input,
textarea:focus {
  outline: none;
}

<section id="contact-page">

  <form>
    <h2>Contact Us</h2>
    <input type="text" placeholder="Name">

    <input type="text" placeholder="E-mail">

    <textarea name="message" placeholder="Message" rows="6"></textarea>

  </form>
</section>