html - 如何使所有输入字段的高度均匀

Question

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

您还可以在此处查看表单

* {
  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>

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

标签： htmlcss

Answer 1

好吧，您使用了小标签，这意味着它1.83em很高。然后我们可以计算出输入的大小，将它们加在一起，然后将其设置为.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>