Materialize框架复选框文本重叠问题求助

直接给你两个可行的解决方案，都是让答案容器自动适配文本高度，同时保持布局一致：

方案1：自定义答案选项容器样式 #

给每个答案项单独加一个自定义类，通过CSS调整布局：

CSS代码 #

.answer-option {
  display: flex;
  align-items: flex-start; /* 让复选框和文本顶部对齐，避免垂直居中导致的换行问题 */
  margin-bottom: 1.2rem; /* 选项之间留统一间距 */
  min-height: auto; /* 移除Materialize可能设置的固定最小高度 */
}

.answer-option input[type="checkbox"] {
  margin-top: 0.3rem; /* 微调复选框位置，和第一行文本对齐 */
}

.answer-option label {
  flex: 1; /* 让文本占据剩余空间，自动换行 */
  margin-left: 0.6rem;
}

对应HTML结构 #

把每个答案包裹在自定义类容器里：

<div class="answer-option">
  <input type="checkbox" id="opt1" name="quiz-answer">
  <label for="opt1">这是一段很长的答案文本，测试换行后的显示效果，现在容器会自动撑开高度，不会和下面的选项重叠</label>
</div>
<div class="answer-option">
  <input type="checkbox" id="opt2" name="quiz-answer">
  <label for="opt2">短文本答案</label>
</div>

方案2：修改Materialize默认集合项样式（如果用了collection组件） #

如果你是用Materialize的collection组件来展示答案，直接覆盖默认样式：

.collection .collection-item {
  display: flex;
  align-items: flex-start;
  min-height: auto; /* 去掉固定高度限制 */
  padding: 1rem 1.5rem; /* 可以根据需求调整内边距 */
}

原因说明 #

Materialize默认的复选框容器或集合项可能设置了固定min-height，并且用align-items: center布局，当文本换行时容器高度不会自动增加，导致内容溢出覆盖下一个选项。上面的方案通过flex布局让容器高度自适应内容，同时保持选项间的间距统一，不用手动设置每个选项的高度。

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