响应式表单布局问题排查：子Div超出父Div边框且移动端未居中

我完全懂你这种明明问题看起来简单但就是卡壳的感觉！咱们一步步来解决这两个核心问题：子Div超出父容器范围，以及移动设备上表单无法居中。

问题根源拆解 #

1. 容器溢出：你的.form.new_user设置了width: 100%，再加上padding和border，默认CSS盒模型会把这两部分算在宽度之外，导致元素实际宽度超过父容器。
2. 居中失效：父容器.content没有设置任何对齐规则，而子元素是inline-block属性，自然不会自动居中；另外移动端的max-width: inherit写法不够稳妥，容易引发宽度适配问题。

修改后的完整代码 #

子Div（.form.new_user）CSS

.form.new_user { 
    display: inline-block; 
    width: 100%; 
    min-width: 230pt; 
    max-width: 270pt; 
    border-color: #3e3e3e; 
    border-width: 1px; 
    border-style: solid; 
    padding: 5pt; 
    box-sizing: border-box; /* 关键：让padding和border纳入宽度计算 */
} 
@media screen and (max-width: 600pt){ 
    .form.new_user { 
        min-width: 100px; 
        max-width: 100%; /* 替换inherit，确保小屏幕不超出父容器 */
    } 
}

父Div（.content）CSS

.content { 
    padding: 7pt; 
    margin: 7pt; 
    text-align: center; /* 让inline-block子元素水平居中 */
}

body CSS（无需修改）

body { 
    margin: 0; 
    font-family: Helvetica, sans-serif; 
}

关键修改说明 #

• box-sizing: border-box：这是解决溢出的核心，它会强制元素的width值包含padding和border，彻底避免额外样式导致的容器超出问题。
• text-align: center：给父容器添加这个属性后，内部的inline-block子元素会自动水平居中，完美解决移动端的居中需求。
• 移动端max-width: 100%：比inherit更明确，确保表单在小屏幕上始终贴合父容器宽度，不会出现横向滚动或偏移。

你可以把这些修改应用后再用边框验证，应该就能彻底解决你的问题了！

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