如何使所有输入字段均高

Question

我设计了一个HTML和CSS的联系人表单。我在每个输入下都添加了一个small标记来显示错误。如果一个字段有错误，则另一个字段被向下推一点。

您还可以看到live这里表单。

​

​

​

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.form-fields {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1rem;
}

.form-fields .input {
  font-size: 0.875rem;
  background: #f2f3f5;
  border-color: #f2f3f5;
}

.form-fields .name-field {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.form-fields .email-field {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.form-fields .subject-field {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.form-fields .phone-field {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.form-fields .message-field {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
}

.form-fields .message-field .input {
  height: 120px;
}

<div class="form-fields">
  <div class="form-group name-field">
    <input type="text" name="name" placeholder="Your Name" id="name" class="input form-control" />
    <small class="text-danger">some error for this input</small>
  </div>
  <div class="form-group email-field">
    <input type="text" name="email" placeholder="Email Address" id="email" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group subject-field">
    <input type="text" name="subject" placeholder="Subject" id="subject" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group phone-field">
    <input type="text" name="phone" placeholder="Phone" id="phone" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group message-field">
    <textarea name="message" placeholder="Message" id="message" class="input form-control"></textarea>
    <small class="text-danger"></small>
  </div>
</div>

​

我怎么才能解决这个问题？

Answer 1

删除align-items: center;

​

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.form-fields {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
         
  grid-gap: 1rem;
}

.form-fields .input {
    display: block;
    width: 100%;
    padding: 0.75rem 0.75rem;
    font-family: inherit;
    margin: 0;
    font-size: 0.85rem;
    background-color: lightgrey;
    border: 1px solid #f7f7f7;
    border-radius: 0.25rem;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
.text-danger {
    color: #f64e60;
}
.form-fields .name-field {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.form-fields .email-field {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.form-fields .subject-field {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.form-fields .phone-field {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.form-fields .message-field {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
}

.form-fields .message-field .input {
  height: 120px;
}

<div class="form-fields">
  <div class="form-group name-field">
    <input type="text" name="name" placeholder="Your Name" id="name" class="input form-control" />
    <small class="text-danger">some error for this input</small>
  </div>
  <div class="form-group email-field">
    <input type="text" name="email" placeholder="Email Address" id="email" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group subject-field">
    <input type="text" name="subject" placeholder="Subject" id="subject" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group phone-field">
    <input type="text" name="phone" placeholder="Phone" id="phone" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group message-field">
    <textarea name="message" placeholder="Message" id="message" class="input form-control"></textarea>
    <small class="text-danger"></small>
  </div>
</div>

​

Answer 2

好吧，你使用了小标签，这意味着它是1.83em tall。然后，我们可以计算输入的大小，将它们相加在一起，然后将其设置为.form-group类的高度。

​

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.form-fields {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1rem;
}

.form-fields .input {
  font-size: 0.875rem;
  background: #f2f3f5;
  border-color: #f2f3f5;
}

.form-fields .name-field {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.form-fields .email-field {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.form-fields .subject-field {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.form-fields .phone-field {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.form-fields .message-field {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
}

.form-fields .message-field .input {
  height: 120px;
}
.form-group {
   height: calc(0.875rem + 1.83em);
}

<div class="form-fields">
  <div class="form-group name-field">
    <input type="text" name="name" placeholder="Your Name" id="name" class="input form-control" />
    <small class="text-danger">some error for this input</small>
  </div>
  <div class="form-group email-field">
    <input type="text" name="email" placeholder="Email Address" id="email" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group subject-field">
    <input type="text" name="subject" placeholder="Subject" id="subject" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group phone-field">
    <input type="text" name="phone" placeholder="Phone" id="phone" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group message-field">
    <textarea name="message" placeholder="Message" id="message" class="input form-control"></textarea>
    <small class="text-danger"></small>
  </div>
</div>

​