右对齐列表中如何正确对齐list-style-image标记图片？

别费劲调list-style-image相关的对齐、定位属性了，这个原生属性本身对右对齐场景的适配缺陷很大，没有开放细粒度的位置调整参数，不管怎么改默认属性，都很难做到标记紧贴列表项、跨浏览器显示一致。

推荐实现方式 #

直接弃用list-style-image，用列表项的伪元素实现自定义标记，可控性拉满，适配右对齐场景非常简单：

• 第一步：清除列表默认样式

  /* 右对齐列表 */
  ul {
    list-style: none;
    padding-right: 0;
    text-align: right;
  }
  

• 第二步：给列表项预留标记位置，通过伪元素加载自定义标记图，精准控制位置

  li {
    /* 给右侧标记留位置，数值根据你的标记图宽度调整 */
    padding-right: 22px;
    position: relative;
    margin: 6px 0;
  }
  li::before {
    content: "";
    position: absolute;
    /* 右对齐直接贴列表项右侧边缘 */
    right: 0;
    top: 50%;
    /* 垂直居中对齐文本 */
    transform: translateY(-50%);
    /* 下面三个值替换成你自己的标记图尺寸、路径 */
    width: 14px;
    height: 14px;
    background: url("你的自定义标记图片路径") center/contain no-repeat;
  }
  

这种写法不管是左对齐还是右对齐列表，都可以随意控制标记和文本的间距、垂直对齐位置，不会出现原生属性下标记乱跑、间距不可控的问题。

如果你非要硬用list-style-image，需要反复组合调整list-style-position: inside/outside、列表右内边距、文本对齐属性，且不同浏览器的默认渲染偏移不统一，最终效果很难稳定，完全不推荐。

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