css - CSS Grid - 输入不考虑填充

Question

我发现当使用不尊重其包含元素的右侧填充的CSS 网格布局时。inputs具体来说，grid-template-columscss 属性似乎是罪魁祸首。

我发现这个问题，除了 CSS Grid Layout，通过box-sizing: border-box. 尽管即使应用了该方法并重置了 CSS，但我似乎仍然无法解决该问题。

这是我的 React 应用程序中行为的简短代码片段：

http://www.webpackbin.com/VJ8DS5kOz

这是一个仅使用普通 HTML + CSS 的示例：

https://repl.it/F75i

我还在我的 React 应用程序中使用Styled Components进行样式设置，鉴于上面的 vanilla CSS 测试，我很确定这不会导致这种行为。

Answer 1

如果我对您的理解正确，我认为保证金就是您想要的。而且我没有看到您已将其应用于输入框。我将以下行添加到CSS文件中。这是否符合您的要求？

input { margin: 5px; }

Answer 2

以防万一其他人偶然发现这一点，问题是如果输入是具有由 Chrome 设置的 webkit 外观的类型，这将覆盖某些属性（如填充）。您将需要设置-webkit-appearance: textfield;输入，以便能够按预期设置样式。

Answer 3

您可能已经想通了，但是，似乎添加了justify-content 属性

justify-content: space-around;

以 CSS 的形式就可以了。