增大列表项目符号与文本间距时仅符号行偏移的解决方法

嘿，我来帮你搞定这个列表排版的小问题！你现在用span加margin-left的方式，只会让单行文本偏移，但如果文本换行的话，第二行就会跑到项目符号旁边，没法保持整体对齐对吧？其实我们有更简洁且靠谱的办法，不用额外套span标签也能完美实现需求。

下面给你两种常用的解决方案：

方案一：利用内边距和文本缩进（推荐） #

这种方法保留默认的项目符号位置逻辑，同时让多行文本自动对齐：

/* 先重置ul的默认内边距，消除浏览器差异 */
ul {
  padding-left: 2em; /* 可根据需求调整，控制整个列表的左侧间距 */
}

ul li {
  padding-left: 10px; /* 这个值就是项目符号和文本之间的间距 */
  text-indent: -10px; /* 和padding-left数值相反，把项目符号拉回正确位置 */
}

对应的HTML结构可以简化成最基础的列表：

<ul>
  <li>这里是需要换行的长文本内容，不管换多少行，所有文本都会和第一行的开头对齐</li>
</ul>

方案二：调整项目符号位置到内部 #

如果你习惯把项目符号放在li的内部区域，可以用这种方式：

ul {
  padding-left: 0; /* 去掉ul的默认左侧内边距 */
}

ul li {
  list-style-position: inside; /* 把项目符号移到li内部 */
  padding-left: 10px; /* 控制项目符号和文本的间距 */
}

如果你一定要保留span标签 #

如果因为某些原因必须保留span嵌套，只需要把span设为块级元素，让它占满li的宽度，这样换行文本也能对齐：

ul li span {
  display: block;
  margin-left: 10px;
}

这样调整后，不管文本是单行还是多行，整个内容都会和项目符号保持均匀的间距，实现你想要的整体偏移效果啦！

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