文本输入填充与父容器的网格间隙重叠[重复]

Question

目前我有这个联系表

#contactForm {
  padding: 100px;
}

.splitRow {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.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>

某些行包含两个输入字段，这些字段分为两列。每个输入都有一个用于样式目的的填充。如您所见，出现了多个问题。文本字段的padding 与grid-gap 重叠，右侧的元素在X 轴上的结束位置不同。

我该如何解决？

Answer 1

在.txtInput上添加box-sizing: border-box;

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

Answer 2

我建议在所有元素上添加box-sizing: border-box 以保持相同的盒子模型。

这将简单地解决问题。您会注意到引导程序也使用相同的盒子模型。

* {
  box-sizing: border-box;
}

#contactForm {
  padding: 100px;
}

.splitRow {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.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>

Answer 3

在.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>