CSS網格 - 輸入不尊重填充

我發現當使用CSS Grid Layoutinputs不尊重其包含元素的右側填充。具體來說，grid-template-colums css屬性似乎是罪魁禍首。CSS網格 - 輸入不尊重填充

我發現這個問題，CSS Grid Layout放在一邊，通過應用box-sizing: border-box解決。雖然即使應用了這個和CSS重置，我似乎仍然無法解決這個問題。

這裏是我的作出反應的應用程序的行爲的縮寫代碼片段：

這裏是它只有香草HTML + CSS的例子：

我我也在使用Styled Components作爲我的React應用程序中的樣式，我相當肯定在上面的vanilla CSS測試中不會對此行爲做出貢獻。

2017-02-05 Jadam

如果我正確理解你，我認爲保證金是你想要的。我沒有看到你已經將它應用到輸入框。我將以下行添加到CSS文件中。這是否做你想要的東西？

input { margin: 5px; }

2017-02-05 05:23:36 Jay

我不認爲保證金是我在這裏尋找的，當我添加上面的行時，我仍然在輸入的間距左側有一個偏差。 – Jadam

如果這只是你想要的，你可以在右側添加保證金。 margin-right：5px; – Jay

我的一些表單元素跨越了整個寬度，只有一半。所以跨越一半的人會得到更寬的水槽。我得到的CSS Grid並沒有完全充實，所以我想黑客可能是必要的。儘管旨在找到一種更簡潔和模式合適的方式來解決問題，以便我不必爲每個表單元素單獨添加特殊類，而不是僅將屬性應用於父元素。 – Jadam

你可能猜想的東西出來，但是，它似乎是在CSS的形式加入justify-content property

justify-content: space-around;

開了竅。

2017-10-05 15:32:25 Jess

回答