如何防止项目符号列表中的文本换行后环绕大图标？

你的问题核心是图标与文本的对齐逻辑导致换行后文本偏移，以下几种简单方法可快速解决：

方法1：Flex布局（最推荐） #

给<li>元素添加Flex布局，让图标和文本在同一行内对齐，文本换行后会自然跟随在图标右侧，不会跑到下方：

li {
  display: flex;
  align-items: flex-start; /* 让文本顶部与图标顶部对齐 */
  gap: 10px; /* 图标和文本的间距，可按需调整 */
}
.icon-green {
  /* 保留原有图标样式即可，无需额外修改 */
}

HTML结构无需改动，直接添加上述CSS即可生效。

方法2：图标浮动布局 #

通过浮动让图标靠左，文本环绕，同时给文本区域预留间距，避免换行后紧贴图标：

li .icon-green {
  float: left;
  margin-right: 10px;
}
li {
  overflow: hidden; /* 清除浮动，防止li元素高度塌陷 */
}

该方法兼容性强，适合维护老项目场景。

方法3：CSS Grid布局 #

用Grid将图标和文本拆分为两列，文本列自动填充剩余空间：

li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

这种方式布局逻辑清晰，适合需要更精确控制元素位置的场景。

效果说明 #

以上三种方法都能确保文本换行后始终保持在图标的右侧区域，不会偏移到图标下方，同时维持图标与文本的对齐关系。可根据项目实际需求选择适配方案。

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