此问题在此处已有答案:
Prevent content from expanding grid items(3个答案)
2天前关闭。
请看下面的代码片段:
第一个
如果运行该代码片段,您会发现输入沿着x轴溢出父div,并且无法容纳在div内部(在基于Chromium的Edge中测试)。基本上,当您为display: grid
的父div提供固定宽度时,输入子div似乎无法容纳。
我已经尝试了我能想到的所有属性,但是它们似乎都不能将输入保持在它们所属的位置(我希望有一个漂亮的2x2网格,其中子对象均匀地适合网格)。
2条答案
按热度按时间fgw7neuy1#
您可以在网格模板列中使用父级css的总父级宽度的百分比。由于您有两个项,您可以将100%除以项的数量,然后使用该百分比
grid-template-columns: repeat(2, 50%);
第一个
fv2wmkja2#
如果
input
width
上没有其他width
样式,则它依赖于它的size
,并且size
的默认值是20
。MDN Link