CSS 帶有輸入字段的網格：alignment 問題

Question

我正在使用帶有輸入字段的 CSS 網格（12 列）。 由於我創建表單的方式（表單設計在 JSON 中並動態創建），輸入字段不是網格的直接子項，而是包含在 div 中。 如果我做一個grid-column: span of the div 我還希望輸入字段跨越列 - 但不要超過grid-gap 。 我嘗試了多種方法，最好的方法似乎是寬度：輸入上的 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>

和 codepen 示例： 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%
}   

if * {box-sizing: border-box; } * {box-sizing: border-box; }對您來說看起來很新，您可以從輸入中刪除邊距和邊框以獲得完美的結果。

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

Answer 2

你快到了。 為確保輸入不會溢出到網格間隙中，您可以查看box-sizing屬性。 但是由於另一個答案已經證明了這一點，我將提供另一種方法。

您可以嘗試使用 flexbox。 我在container class flex 父級中創建了 div，然后將這些 div 中的輸入的flex-grow設置為 1。這樣可以確保 flex 子級占用 flex 父級中的所有額外空間。 為了確保輸入不會溢出，我給了它們 100% 的max-width 。 我還刪除了fill-width class 的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>