css 防止输入溢出网格父级[重复]

8cdiaqws  于 2022-12-05  发布在  其他
关注(0)|答案(2)|浏览(111)

此问题在此处已有答案

Prevent content from expanding grid items(3个答案)
2天前关闭。
请看下面的代码片段:
第一个
如果运行该代码片段,您会发现输入沿着x轴溢出父div,并且无法容纳在div内部(在基于Chromium的Edge中测试)。基本上,当您为display: grid的父div提供固定宽度时,输入子div似乎无法容纳。
我已经尝试了我能想到的所有属性,但是它们似乎都不能将输入保持在它们所属的位置(我希望有一个漂亮的2x2网格,其中子对象均匀地适合网格)。

fgw7neuy

fgw7neuy1#

您可以在网格模板列中使用父级css的总父级宽度的百分比。由于您有两个项,您可以将100%除以项的数量,然后使用该百分比grid-template-columns: repeat(2, 50%);
第一个

fv2wmkja

fv2wmkja2#

如果inputwidth上没有其他width样式,则它依赖于它的size,并且size的默认值是20

MDN Link

相关问题