如何基于给定结构实现输入框逐行展示且每行仅显示4个？

基于你提供的HTML结构，无需修改现有DOM层级，仅通过CSS即可实现所有input逐行展示、每行最多4个的效果，以下是具体方案：

方法一：使用:has()伪类（现代浏览器推荐） #

利用CSS的:has()伪类精准选中所有包含input的子容器，配合弹性布局实现自动换行：

/* 最外层容器开启弹性布局并允许换行 */
div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 可选：设置输入框之间的间距 */
  padding: 15px; /* 可选：给容器添加内边距优化视觉 */
}

/* 选中所有包含input的子div，分配每行四分之一宽度 */
div:first-of-type div:has(input) {
  flex: 0 0 calc(25% - 9px); /* 减去gap的一半，确保每行刚好4个 */
  box-sizing: border-box; /* 避免内边距/边框破坏宽度计算 */
}

方法二：兼容旧版浏览器的通用选择器 #

如果需要兼容不支持:has()的浏览器（如旧版Chrome、Firefox），可以用层级选择器覆盖所有包含input的容器：

div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 15px;
}

/* 选中所有层级下的input父容器 */
div:first-of-type > div,
div:first-of-type div div {
  flex: 0 0 calc(25% - 9px);
  box-sizing: border-box;
}

效果说明 #

• 两种方案都会让所有input所在的容器自动排列，每行最多4个，超出部分自动换行；
• gap属性用于控制输入框之间的间距，可根据需求调整数值；
• calc(25% - 9px)是为了抵消gap的影响，确保4个容器刚好填满一行宽度，若不需要间距，直接设置flex: 0 0 25%即可。

内容的提问来源于stack exchange，提问作者Arun Muraleedharan