本文详解 Materialize 1.0+ 中因 label 内联渲染导致长文本复选框选项相互覆盖的问题，提供无需修改 Materialize 源码、兼容响应式的标准修复方案，并附可直接运行的代码示例与关键注意事项。

本文详解 materialize 1.0+ 中因 `label` 内联渲染导致长文本复选框选项相互覆盖的问题，提供无需修改 materialize 源码、兼容响应式的标准修复方案，并附可直接运行的代码示例与关键注意事项。

在使用 Materialize CSS 构建在线测验（Quiz）表单时，开发者常遇到复选框（）与其关联文本严重重叠的问题——尤其当选项文本较长时，多行内容会挤占同一垂直空间，造成视觉混乱与可访问性下降。根本原因在于 Materialize 默认将 设为 display: inline，且其内部 包裹的文本未正确触发块级换行与高度自适应，导致父容器无法根据内容动态撑开。

✅ 正确修复方式（推荐）

Materialize 官方文档未明确说明此场景的最佳实践，但经验证，以下两步轻量修改即可彻底解决，无需引入额外 CSS 或 JS，完全兼容 Materialize 1.0.0+ 版本：

1. 将每个 包裹在独立的

   块容器中
   确保每个复选框选项占据独立的文档流块，避免行内元素堆叠。

2. 为 内部的 显式设置 style="height: auto;"
   强制该 高度随内容自然伸缩（Materialize 默认可能设为固定高度或 min-height，干扰换行布局）。

⚠️ 注意：必须同时应用两项修改，缺一不可。仅改 高度而不包裹

，仍无法解决行高塌陷；仅加

而不调整 高度，在某些浏览器中仍可能出现截断。

? 示例代码（修复后）

以下为原问题代码的关键片段修正版（仅展示需修改的复选框部分）：

立即学习“前端免费学习笔记（深入）”；

<!-- ✅ 修复后的复选框选项结构（共3处，每处均需如此修改） -->
<div class="row">
  <div class="input-field col s12">
    <div>
      <label>
        <input type="checkbox" name="ans_a" id="ans_a" value="A">
        <span style="height: auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</span>
      </label>
    </div>
  </div>
</div>

<div class="row">
  <div class="input-field col s12">
    <div>
      <label>
        <input type="checkbox" name="ans_b" id="ans_b" value="B">
        <span style="height: auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</span>
      </label>
    </div>
  </div>
</div>

<div class="row">
  <div class="input-field col s12">
    <div>
      <label>
        <input type="checkbox" name="ans_c" id="ans_c" value="C">
        <span style="height: auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>
      </label>
    </div>
  </div>
</div>

? 补充说明与最佳实践

• 为什么不用 !important 或全局 CSS？
  上述方案采用内联样式精准控制，避免污染全局样式表，也防止与其他 Materialize 组件（如开关 Switch、单选组 Radio Group）产生冲突。

• 响应式兼容性
  此修复完全保留 Materialize 的栅格系统（col s12）和移动适配逻辑，长文本在小屏设备上会自动换行并保持间距，无需额外媒体查询。

• 无障碍（a11y）保障
  仍正确包裹 ，屏幕阅读器可正常识别关联关系；

  包裹不会破坏语义结构，符合 WCAG 2.1 标准。

• 进阶建议（可选）
  若项目中大量使用此类长文本选项，可封装为自定义组件或通过 JavaScript 批量注入

  和 style，提升可维护性。但对中小型 Quiz 应用，手动修改 3–5 处已足够高效。

  通过以上调整，所有复选框选项将严格按内容高度自适应排布，彻底消除文字重叠，同时保持 Materialize 的视觉风格与交互一致性。