HTML/CSS中input输入框宽度无法修改的问题排查与解决

问题原因 #

你设置的#name { width:70%; }没生效，核心是flex布局的规则覆盖：
你的.next-to-each是flex容器，所有input被.next-to-each input规则设置了flex: 1——这个属性等价于flex-grow:1; flex-shrink:1; flex-basis:0%。在flex布局中，flex-basis会替代width作为元素的基准尺寸，再加上flex-grow:1会让input自动填充容器剩余空间，所以你单独设置的width会被完全忽略。

解决办法 #

办法1：用flex属性控制（推荐）

既然是flex布局，直接用flex相关属性控制尺寸更合理，把#name的样式改成：

#name {
  flex: 0 0 70%; /* 不放大、不缩小，基准尺寸设为70% */
}

这样既保留flex布局的弹性，又能精准控制name输入框宽度，subject输入框还能通过原有的flex:1填充剩余空间。

办法2：取消全局input的flex属性

如果不需要subject输入框自动填充空间，可以删掉.next-to-each input里的flex:1，再分别设置两个input的宽度：

.next-to-each input{
  margin-left: 10px;
  /* 移除 flex:1; */
}

#name {
  width:70%;
}

#subject {
  width:30%; /* 按需调整 */
}

这种方式适合固定尺寸的布局场景，注意容器宽度要能容纳两个input的总宽度。

办法3：强制禁用flex自动分配

如果想保留全局input的flex属性，又要让width生效，给#name加上flex:none，让它不参与flex空间分配：

#name {
  width:70%;
  flex: none; /* 禁用flex的自动伸缩 */
}

不过这种方式可能破坏flex布局的整体弹性，按需选择即可。

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