调整input字体大小时宽度异常变宽的问题求助

问题原因分析 #

1. 盒模型默认行为：input元素默认使用content-box盒模型，宽度仅计算内容区域，内边距、边框会额外增加总宽度，容易超出外层容器。
2. 父容器尺寸冲突：#functionality设置了width:100%同时又加了左右margin，导致它的实际总宽度超出父容器#calculator，间接让内层的#display_calc尺寸限制失效。
3. 替换元素特性：input作为替换元素，其默认宽度会基于内容（比如默认占位符）计算，当字体放大时，内容宽度的计算值会撑破设置的max-width。

修复方案 #

以下是调整后的完整代码，核心修改点如下：

• 全局设置box-sizing: border-box，统一所有元素的尺寸计算规则
• 修正#functionality的宽度和边距，避免超出父容器
• 优化输入框的样式，确保完全填充容器且不溢出

修改后的CSS代码

/* 全局统一盒模型 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#calculator {
  background-color: #212121;
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  padding: 15px 5px 5px 15px; /* 把#functionality的margin移到这里 */
}

#functionality {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#display_calc {
  width: 100%; /* 直接用100%填充父容器 */
  height: 70px;
  background-color: #1a1a1a;
  overflow: hidden; /* 确保输入框不溢出 */
}

#display {
  width: 100%;
  height: 100%;
  font-size: 50px;
  background-color: rgba(0, 50, 0, 0.5); /* 修正透明度值，原代码是5，应该是0-1之间 */
  color: white;
  border: none;
  padding: 0 10px; /* 可选：添加内边距避免文字贴边 */
  text-align: right; /* 计算器显示习惯，文字右对齐 */
}

修改后的HTML代码

<div id="calculator">
  <div id="functionality">
    <div id="display_calc">
      <input id="display" type="text"> <!-- 建议添加type属性，默认是text -->
    </div>
  </div>
</div>

额外说明 #

• 原代码中rgba(0, 50, 0, 5)的透明度值错误，rgba的第四个参数应该是0到1之间的小数，这里改成了0.5
• 给input添加type="text"明确类型，避免浏览器默认行为差异
• 设置text-align:right更符合计算器的显示逻辑

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