带有输入字段的CSS网格:对齐问题

Question

我使用CSS (12列)和输入字段。由于我创建表单的方式(表单设计在JSON中，并且是动态创建的)，输入字段不是网格的直接子字段，而是封装在div中的。如果我做了一个网格列: div的span，我也希望输入字段跨越这些列，但不是跨越网格间隙。我尝试过多种方法，最好的方法似乎是宽度: 100%的输入，但这忽略了网格的差距。知道如何使输入字段与div相同的宽度吗？

抱歉，如果我解释得不好-这是我的意思的截图：

​

​

在这里，代码：

​

   .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        background-color: black;
      }

      .fill-width {
        width: 100%;
      }

      .width-4 {
        grid-column: span 4;
      }

<div class="container">
      <input id="field1" class="width-4" placeholder="field1 (4)" />
      <input id="field2" class="width-4" placeholder="field2 (4)" />
      <input id="field3" class="width-4" placeholder="field3 (4)" />

      <div class="width-4">
        <input id="field5" placeholder="field5 (4)" />
      </div>
      <input id="field6" class="width-4" placeholder="field6 (4)" />
      <input id="field7" class="width-4" placeholder="field7 (4)" />

      <div class="width-4">
        <input id="field1" class="fill-width" placeholder="field1 (4)" />
      </div>
      <div class="width-4">
        <input id="field2" class="fill-width" placeholder="field2 (4)" />
      </div>
      <div class="width-4">
        <input id="field3" class="fill-width" placeholder="field3 (4)" />
      </div>
    </div>

​

以及代码示例：https://codepen.io/ursus_the_bear/pen/mdRQNXM

Answer 1

你没有做错什么，但让我解释一下为什么会发生这种情况，以及解决办法。

输入元素具有浏览器添加的一些css。比如边框，最大宽度之类的。您需要去掉这些，这样您的输入就可以严格遵循样式表。

将此添加到CSS中，使其像魅力一样工作：

* { /* all element selector */
  box-sizing: border-box; /* border, within the width of the element */
}
input {
  display: block;
  width: 100%
}   

如果* {box-sizing: border-box; }对您来说是新的，您可以从输入中删除边距和边框，以获得完美的结果。

 input {
  display: block;
  width: 100%;
  border: none;
  margin: 0;
} 

Answer 2

你快到了。为了确保输入不会溢出到网格间隙，您可以查看box-sizing属性。但由于另一个答案已经证明了这一点，我将提供另一种方法。

你可以试着用挠曲盒。我在container类flex父母中创建了div，然后给出了这些div中的输入值为1，这确保了flex子函数占用了flex父类中的所有额外空间。为了确保输入不溢出，我给了它们100%的max-width。我还删除了width类的fill-width声明：

​

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
  background-color: black;
}

.width-4 {
  grid-column: span 4;
}


/* New styles */

.container div {
  display: flex;
  flex-flow: row nowrap;
}

.container div input {
  flex-grow: 1;
  max-width: 100%;
}

<div class="container">
  <input id="field1" class="width-4" placeholder="field1 (4)" />
  <input id="field2" class="width-4" placeholder="field2 (4)" />
  <input id="field3" class="width-4" placeholder="field3 (4)" />

  <div class="width-4">
    <input id="field5" placeholder="field5 (4)" />
  </div>
  <input id="field6" class="width-4" placeholder="field6 (4)" />
  <input id="field7" class="width-4" placeholder="field7 (4)" />

  <div class="width-4">
    <input id="field1" class="fill-width" placeholder="field1 (4)" />
  </div>
  <div class="width-4">
    <input id="field2" class="fill-width" placeholder="field2 (4)" />
  </div>
  <div class="width-4">
    <input id="field3" class="fill-width" placeholder="field3 (4)" />
  </div>
</div>

​