创建HTML调查表单时的宽度适配问题求助

这个问题的根源在于CSS的默认盒模型！

浏览器默认的盒模型规则里，元素的width属性只计算内容区域的宽度，不包含元素自带的border和padding。你的输入框（.form-control）设置了width:100%，但它本身默认带有边框和内边距，所以实际渲染的总宽度会是「100%内容宽度 + 边框宽度 + 内边距宽度」，自然就超出了蓝色的表单容器。

给你两个简单的解决办法：

1. 给输入框添加box-sizing: border-box（推荐） #

这个属性会让元素的width值包含border和padding，设置width:100%就会刚好填满容器：

.survey-form { 
  width: 50%; 
  margin-left: 30%; 
  margin-right: 30%; 
  background: blue; 
}
.form-control { 
  width: 100%; 
  box-sizing: border-box; /* 这行是关键 */
}

2. 全局统一盒模型（更省心） #

如果你不想给每个表单元素单独设置，可以给所有元素统一开启border-box，避免后续其他元素出现类似问题：

* {
  box-sizing: border-box;
}

.survey-form { 
  width: 50%; 
  margin-left: 30%; 
  margin-right: 30%; 
  background: blue; 
}
.form-control { 
  width: 100%; 
}

另外提个小细节：你的表单容器margin-left:30% + margin-right:30% + width:50%总和是110%，会超出视口宽度，不过这和输入框宽度问题无关，你可以根据需要调整~

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