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

Posted 2023-03-06

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

【英文标题】：text input padding overlaps the grid-gap of the parent container [duplicate]

【发布时间】：2019-05-18 19:31:33

【问题描述】：

目前我有这个联系表

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

我该如何解决？

【参考方案1】：

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

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

【参考方案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>

【参考方案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>