CSS网格 - 输入不尊重填充

问题描述：

我发现当使用CSS Grid Layoutinputs不尊重其包含元素的右侧填充。具体来说，grid-template-colums css属性似乎是罪魁祸首。CSS网格 - 输入不尊重填充

我发现这个问题，CSS Grid Layout放在一边，通过应用box-sizing: border-box解决。虽然即使应用了这个和CSS重置，我似乎仍然无法解决这个问题。

这里是我的作出反应的应用程序的行为的缩写代码片段：

这里是它只有香草HTML + CSS的例子：

我我也在使用Styled Components作为我的React应用程序中的样式，我相当肯定在上面的vanilla CSS测试中不会对此行为做出贡献。

答

如果我正确理解你，我认为保证金是你想要的。我没有看到你已经将它应用到输入框。我将以下行添加到CSS文件中。这是否做你想要的东西？

input { margin: 5px; }

我不认为保证金是我在这里寻找的，当我添加上面的行时，我仍然在输入的间距左侧有一个偏差。 – Jadam

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

我的一些表单元素跨越了整个宽度，只有一半。所以跨越一半的人会得到更宽的水槽。我得到的CSS Grid并没有完全充实，所以我想黑客可能是必要的。尽管旨在找到一种更简洁和模式合适的方式来解决问题，以便我不必为每个表单元素单独添加特殊类，而不是仅将属性应用于父元素。 – Jadam

答

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

justify-content: space-around;

开了窍。