在数字之前如何将CSS右对齐？

Question

我希望能够在不使用有序列表的情况下拥有编号段落。我试图通过在CSS中使用content:counter(paragraph)来实现这一点，以便每个我创建的段落块都生成一个位于左侧的数字。

.pass {
  counter-reset:paragraph;
}

.pass p:before {
  content:counter(paragraph);
  position:absolute;
  font-size:0.6em;
  color:#999;
  margin-left:-3em;
  counter-increment: paragraph;
}

它可以正常工作，但问题在于我无法弄清楚如何对齐数字，使它们都靠右对齐。

因此，不是这样的：

7   Content
8   Content
9   Content
10  Content

我希望它们看起来像这样：

 7  Content
 8  Content
 9  Content
10  Content

有没有一种方法可以不使用OL和LI来完成这个任务？

- Maxor

---

你为什么要将它们绝对定位呢？ - BoltClock

如果你的段落有两行或更多，你希望计数器数字如何显示？ - Marc Audet

请展示你的HTML，最好是创建一个jsfiddle。 - beautifulcoder

这是一个没有绝对定位元素的解决方案。http://jsfiddle.net/zgMYu/10/ - Josh Crozier

Answer 1

为:before类设置一个宽度，然后使用text-align:right对齐。 http://jsfiddle.net/QAX8m/

.pass {counter-reset:paragraph;}
.pass p {padding-left:40px;}
.pass p:before {
    content:counter(paragraph);
    counter-increment: paragraph;
    position:absolute;
    left:0;
    width:40px;
    text-align:right;
}

- andi

---

可以了，谢谢。我本来以为我已经尝试过那个方法了，但可能是我做错了什么。 - Maxor