将HTML标题与悬挂部分编号对齐？

Question

我目前正在为我们的文档（HTML + CSS + PrinceXML = PDF）重新实现公司风格，并且无法解决一件事。我需要的是处理部分编号，即标题本身与文本垂直左对齐，但部分编号在左列中“悬挂”。可能最好的例子就是浏览器对编号列表的渲染：

---

1. 标题1

   Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

2. 标题2

   Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

---

基本上，我想为所有级别的标题实现相同的内容。在CSS中有没有明智的方法呢？

Answer 1

我已经完成了这件事。基本上，每个计数器都必须浮动到左侧：

h1:before {
    content: counter(chapter) ". ";
    float:left;
    width: 1.2cm;
}

并且每个标题都必须获得边距和left属性：

h1 {    
    left: 1.2cm;
    margin-left: -1.2cm;
}

Answer 2

试试这个：

h1, h2, h3 {
  text-align: left;
  margin-left: -10px;
}

Answer 3

h1 { margin-left: -10px; }将一直有效，直到您的标题变为两行。

这个怎么样：

h1 { text-indent: -10px }