如何将有序列表（ol）的编号设置为右对齐？

要让有序列表的编号和内容同步右对齐，给你两种简单可行的方案：

方案一：使用list-style-position快速实现 #

只需要给<ol>添加list-style-position: inside属性，就能让编号纳入文本流，和内容一起受text-align: right控制：

ol {
  width: 15vw;
  list-style-position: inside; /* 把编号放进文本容器内，关键属性 */
  text-align: right;
}

对应的HTML可以去掉内联样式，统一用CSS控制：

<ol>
  <li>Orange</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Pineapple</li>
  <li>Pear</li>
  <li>Grape</li>
  <li>Watermelon</li>
  <li>Strawberry</li>
  <li>Blueberry</li>
  <li>Raspberry</li>
  <li>Kiwi</li>
</ol>

方案二：自定义计数器（更灵活的样式控制） #

如果需要调整编号的间距、颜色等样式，可以用CSS计数器手动控制：

ol {
  width: 15vw;
  list-style: none; /* 隐藏默认编号 */
  counter-reset: list-counter; /* 初始化计数器 */
  text-align: right;
}

li {
  counter-increment: list-counter; /* 每个列表项递增计数器 */
}

li::before {
  content: counter(list-counter) ". "; /* 生成自定义编号 */
  margin-left: 8px; /* 调整编号和内容的间距 */
  /* 还可以添加color、font-weight等样式定制编号外观 */
}

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