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

时间：2018-12-18 11:29:31

标签： html css

当前我有此联系表

#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轴上的结束位置不同。

我该如何解决？

3 个答案:

答案 0 :(得分：2)

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

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

答案 1 :(得分：1)

我建议在所有元素上添加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>

答案 2 :(得分：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>

相关问题
最新问题