html - 文本输入填充与父容器的网格间隙重叠

Question

<分区>

Answer 1

在 .splitRow 中，您尝试设置溢出的 100% 宽度 + 20px。 尝试将您的网格更改为:

grid-template-columns: 48% 48%;
grid-gap: 4%;

或者如果你想以像素为单位保留它

grid-template-columns: calc(50% - 10px) calc(50% - 10px);
grid-gap: 20px;

#contactForm {
  padding: 100px;
}

.splitRow {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-gap: 4%;
}

.inputContainer {
  width: 100%;
  margin: 10px;
}

.inputTitle {
  display: block;
}

.txtInput {
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
}

#contactSubmitBtn {
  padding: 10px 16px;
  margin: 10px;
}

#contactMessageInput {
  resize: none;
}

@media only screen and (max-width: 700px) {
  .splitRow {
    grid-template-columns: 100%;
  }
  #contactSubmitBtn {
    width: 100%;
  }
}

<div>
  <form id="contactForm" action="/fooBar">
    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="firstname">First Name *</label>
        <input class="txtInput" type="text" v-model="firstname" name="firstname" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="lastname">Last Name *</label>
        <input class="txtInput" type="text" v-model="lastname" name="lastname" required>
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="company">Company</label>
      <input class="txtInput" type="text" v-model="company" name="company">
    </div>

    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="email">E-Mail *</label>
        <input class="txtInput" type="email" v-model="email" name="email" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="phone">Phone</label>
        <input class="txtInput" type="text" v-model="phone" name="phone">
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="message">Your Message *</label>
      <textarea id="contactMessageInput" class="txtInput" v-model="message" name="message" required rows="10" cols="50"></textarea>
    </div>

    <input id="contactSubmitBtn" type="submit" value="Send">
  </form>
</div>