HTML计算器输入框右侧溢出容器，如何解决？

问题根源在于CSS盒模型的默认行为：你给输入框设置了width: 100%，同时又添加了padding-right: 10px，而默认的box-sizing: content-box会将padding值额外加到宽度计算中，导致输入框总宽度超出容器范围，进而产生右侧溢出。

以下两种简单方法可以解决这个问题：

方法一：修改盒模型为border-box #

给输入框添加box-sizing: border-box属性，这样padding和border都会被包含在设置的width范围内，不会额外撑开元素：

.container input {
  width: 100%;
  border-style: none;
  height: 50px;
  border-radius: 1rem;
  outline: 2px solid;
  font-size: 20px;
  text-align: right;
  padding-right: 10px;
  box-sizing: border-box; /* 新增该行代码 */
}

更推荐全局设置盒模型，避免后续其他元素出现类似布局问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 新增该行代码 */
}

方法二：手动调整输入框宽度 #

如果不想修改盒模型，可以通过calc()函数计算输入框宽度，减去padding的值：

.container input {
  width: calc(100% - 10px); /* 用100%宽度减去padding-right的10px */
  border-style: none;
  height: 50px;
  border-radius: 1rem;
  outline: 2px solid;
  font-size: 20px;
  text-align: right;
  padding-right: 10px;
}

两种方法都能让输入框完全适配容器，优先推荐方法一，因为全局设置border-box是现代前端开发的常规操作，能避免大量布局冲突。

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