输入框宽度超出容器：原因解析与解决方案咨询

原始HTML代码 #

<div>
  <label id="name-label">
    NOMBRE
    <input type="text" id="username" name="username" placeholder="Introduce tu nombre" required>
  </label>
</div>

应用的CSS代码 #

div{
  border: 2px solid orange;
}

label{
  background-color: blue;
  display: block;
}

input{
  width: 100%;
}

为什么会超出？ #

核心原因是CSS默认的盒模型规则：默认情况下，元素的width仅计算内容区域的宽度，而input元素自带浏览器默认的padding和border。当你给input设置width:100%时，这个100%是label的内容宽度，再加上input自身的padding和border，总宽度就会超过label的宽度，自然就溢出了。

解决方法 #

方法1：修改盒模型为border-box（推荐） #

给input设置box-sizing: border-box，这样元素的width会包含内容区、padding和border，总宽度严格等于设置的100%，不会超出父元素：

div{
  border: 2px solid orange;
}

label{
  background-color: blue;
  display: block;
}

input{
  width: 100%;
  box-sizing: border-box; /* 关键属性 */
}

如果想让页面所有元素都遵循这个规则，也可以全局设置：

* {
  box-sizing: border-box;
}

方法2：移除input的默认内边距和边框（不推荐） #

直接去掉input自带的padding和border，但会丢失默认样式，需要自己重新定制，所以一般不建议：

input{
  width: 100%;
  padding: 0;
  border: none;
}

方法3：用Flex布局自动填充空间 #

把label设为flex容器，让input自动填充剩余空间，不需要手动设置width:100%：

div{
  border: 2px solid orange;
}

label{
  background-color: blue;
  display: flex;
  flex-direction: column; /* 让文字和input垂直排列 */
}

input{
  flex: 1; /* 自动填充label的剩余空间 */
}

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