如何避免多行文本换行后位于图标下方，保持首行对齐？

当前代码中，列表项内的图标与长文本在窗口宽度缩小时，换行后的文本会跑到图标下方，无法与首行文本起始位置保持对齐。以下是几种可行的解决方法：

方法一：Flex布局实现对齐 #

给列表项设置Flex布局，让图标和文本处于独立的弹性容器中，换行文本会自动保持在右侧区域：

.my-style {
  padding: 0;
  list-style-type: none;
}

.my-style li {
  display: flex;
  align-items: flex-start; /* 让图标与文本顶部对齐 */
  gap: 8px; /* 图标与文本的间距，可按需调整 */
}

.my-style .tickbox {
  width: 16px; /* 固定图标宽度，确保对齐稳定性 */
}

方法二：内边距+绝对定位 #

给列表项预留左侧内边距，将图标定位到预留区域，文本会在预留区域右侧换行：

.my-style {
  padding: 0;
  list-style-type: none;
}

.my-style li {
  position: relative;
  padding-left: 24px; /* 预留图标位置，根据图标大小调整 */
}

.my-style .tickbox {
  position: absolute;
  left: 0;
  top: 2px; /* 微调图标垂直位置，与文本对齐 */
}

方法三：inline-block固定宽度 #

将图标设置为inline-block并固定宽度，文本会在图标右侧自然换行对齐：

.my-style {
  padding: 0;
  list-style-type: none;
}

.my-style .tickbox {
  display: inline-block;
  width: 16px;
  margin-right: 8px;
  vertical-align: top; /* 让图标与文本顶部对齐 */
}

以上三种方法均可解决换行文本偏移的问题，可根据实际布局需求选择使用。

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