网页中<h2>Emergency contact标题错位问题求助

• 修正类名拼写错误：你的代码里section类名写的是emergancy-contact，正确拼写应为emergency-contact。如果全局CSS中是按正确拼写定义的样式规则，这个拼写错误会导致该区域无法应用对应布局样式，直接引发标题错位。修正后的section代码示例：

  <section class="emergency-contact">
      <h2>Emergency contact</h2>
      <!-- 表单内容 -->
  </section>
  

• 对齐两个section的CSS规则：对比.personal-info和.emergency-contact的CSS样式，确保后者继承了和前者一致的布局基础属性，比如外边距、内边距、标题样式等。示例统一规则：

  .personal-info, .emergency-contact {
    margin: 2rem 0;
    padding: 1.2rem;
    box-sizing: border-box;
  }
  
  .personal-info h2, .emergency-contact h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
  }
  

• 排查表单辅助方法生成的DOM结构：ASP.NET MVC的表单辅助方法可能在emergency-contact区域生成了额外的嵌套元素（比如自动添加的div容器），破坏了布局层级。通过浏览器开发者工具（F12）查看实际渲染的DOM，对比两个section的结构差异，针对性调整样式：

  比如如果辅助方法生成的表单容器自带默认margin，可添加CSS重置：

  .emergency-contact form > .form-group:first-child {
    margin-top: 0;
  }
  

• 修复浮动或flex布局异常：如果页面使用浮动布局，检查emergency-contact区域是否存在未清除的浮动；如果是flex布局，确认容器的flex-direction、align-items等属性设置正确，避免标题被挤压错位：

  /* 清除浮动方案 */
  .emergency-contact {
    overflow: hidden;
  }
  
  /* flex布局修正方案 */
  .emergency-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  

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