如何调整HTML无序列表与前置文本的对齐效果？

你的原始代码问题出在<li>列表项没有对应的<ul>父容器，导致列表默认的悬挂缩进对齐效果失效，才会出现文本错位的问题。以下是符合需求的修改方案：

调整后代码 #

<span>
<b>cannot contain</b>
<ul style="margin: 6px 0 0 0; padding-left: 1.5em; list-style-position: outside;">
  <li>The "@" or "<" symbols </li>
  <li>your SkyMiles number, email or username</li>
  <li>More than 3 special characters </li>
</ul>
</span>

实现说明 #

• 仅新增了<ul>标签和可选的行内样式，完全没有修改<span>标签，符合限制要求
• 给<li>套上<ul>父容器后，会自动触发浏览器的列表默认样式：项目符号单独悬挂，每行文本都和列表项首行左对齐，和你期望的效果一致
• 可以根据实际页面字号调整padding-left的数值，就能精准匹配你要的对齐距离

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