如何将ul列表的项目符号对齐到多行文本的顶部？

你当前仅设置::marker字号无法实现符号对齐文本顶部的效果，浏览器默认会将列表符号与li内容的垂直中点对齐，多行文本场景下符号会明显偏下。

推荐通过自定义伪元素+flex布局实现，可控性和兼容性更好，无需修改原有HTML结构，只需要替换原有CSS代码即可：

/* 清除默认列表样式 */
.article-bulletpnts {
  list-style: none;
  padding-left: 0;
}

/* 让li内容横向排列，顶部对齐 */
.article-bulletpnts li {
  display: flex;
  align-items: flex-start;
  gap: 10px; /* 调整圆点和文本的间距 */
  margin-bottom: 8px; /* 调整li之间的垂直间距，可按需删除 */
}

/* 自定义圆点符号 */
.article-bulletpnts li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000; /* 调整圆点颜色 */
  margin-top: 6px; /* 微调圆点垂直位置，对齐文本第一行 */
  flex-shrink: 0; /* 避免圆点被文本挤压变形 */
}

如果需要调整对齐精度，直接修改margin-top的数值即可，数值越大圆点位置越靠下。

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