不使用jQuery如何实现li元素高度随内部文本行数动态自适应

根因分析 #

你当前li元素设置的display: inline属性是核心问题：行内元素无法识别自定义宽度属性，也不会根据内部换行内容自动调整容器高度，直接导致长文本溢出。

最终修改后的CSS #

.container-reading ul{
  list-style: none;
  margin: 0;
  padding: 20px;
}

.container-reading ul li{
  color: black;
  position: relative;
  /* 将原inline改为block，支持宽高设置和高度自适应 */
  display: block;
  width: 95%;
  font-size: 16px;
  border-bottom: 1px solid #333;
  /* 增加上下内边距，兼顾短选项的美观度和长选项的留白 */
  padding: 8px 0 5px 0;
  /* 行高设置提升多行文本可读性 */
  line-height: 1.5;
  /* 删掉你之前手动设置的固定height属性即可，不需要额外配置高度 */
}

/* 可选优化：解决单选框和文本对齐问题 */
.container-reading ul li input,
.container-reading ul li label {
  vertical-align: middle;
}
.adjust-reading-text {
  display: inline;
}

效果说明 #

修改后li元素的高度会完全跟随内部文本内容的行数自动调整：短选项高度自动收缩，不会出现大面积留白；长选项自动撑开高度，不会出现内容溢出。

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