如何实现HTML标签列表的右对齐？

方法一：文本右对齐，编号保留左侧 #

直接给<ol>设置文本右对齐样式，列表项内容会靠右，但编号仍在列表容器左侧：

<ol style="text-align: right;">
  <li>Debian</li>
  <li>Ubuntu</li>
  <li>Mint</li>
  <li>elementaryOS</li>
  <li>RedHat</li>
  <li>Fedora</li>
  <li>Slackware</li>
</ol>

方法二：编号与文本一起右对齐 #

通过调整列表样式位置，让编号进入列表项内部，再配合文本右对齐，实现编号和内容一起靠右：

<ol style="text-align: right; list-style-position: inside; padding-right: 20px;">
  <li>Debian</li>
  <li>Ubuntu</li>
  <li>Mint</li>
  <li>elementaryOS</li>
  <li>RedHat</li>
  <li>Fedora</li>
  <li>Slackware</li>
</ol>

padding-right用于调整列表整体和右侧边缘的间距，可根据需求修改数值。

方法三：CSS计数器自定义右对齐样式（更灵活） #

如果需要精准控制编号与文本的间距，可使用CSS计数器替代默认列表编号：

<style>
.right-align-ol {
  list-style: none;
  counter-reset: list-counter;
  padding-right: 20px;
  text-align: right;
}
.right-align-ol li {
  counter-increment: list-counter;
}
.right-align-ol li::before {
  content: counter(list-counter) ".";
  margin-left: 8px;
}
</style>

<ol class="right-align-ol">
  <li>Debian</li>
  <li>Ubuntu</li>
  <li>Mint</li>
  <li>elementaryOS</li>
  <li>RedHat</li>
  <li>Fedora</li>
  <li>Slackware</li>
</ol>

这种方式可以自由调整编号的样式、间距，适配更多场景。

内容的提问来源于stack exchange，提问作者Muhammad Bahruddin Saputra