Question

我在使用CSS Grid Layout时发现inputs不尊重其包含元素的右侧边距。具体来说，grid-template-colums css属性似乎是罪魁祸首。

我发现这个问题，除了CSS网格布局，通过应用box-sizing: border-box解决了。虽然即使应用了这个并且重置了CSS，我似乎仍然无法解决这个问题。

以下是我的React应用程序行为的缩写代码段：

这是一个只有vanilla HTML + CSS的例子：

我还在我的React应用程序中使用Styled Components进行样式设置，鉴于上面的vanilla CSS测试，我非常确定这种行为没有做出贡献。

Answer 1

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

input { margin: 5px; }

Answer 2

你可能已经找到了一些东西，但似乎是在添加justify-content property

justify-content: space-around;

CSS中的

可以解决问题。

Answer 3

以防万一其他人迷惑于此，问题在于，如果输入是具有由Chrome设置的webkit外观的类型，则它将覆盖某些属性（如填充）。您需要在输入上设置-webkit-appearance: textfield;，以便能够按预期的样式进行设置。