HTML/CSS：将部分编号挂在左对齐标题文本的左侧答案

【问题标题】：HTML/CSS: Hanging section numbers to the left of left-aligned heading textHTML/CSS：将部分编号挂在左对齐标题文本的左侧
【发布时间】：2010-11-16 19:25:46
【问题描述】：

如何使用 CSS 创建悬挂部分编号？换句话说，

标题文本应在与文本相同的水平位置左对齐，但
节号节号应“挂”在左栏中。

或许最好的例子就是浏览器对编号列表的渲染：

标题 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。
标题 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。

在 CSS 中是否有任何理智的方法可以在标题标签之前使用数字来执行此操作（适用于所有级别）？

要修改的简单示例 HTML：

<html>
<body>

<h1>First h1 heading</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<h2>First h2 heading</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

</body>
</html>

【问题讨论】：

你有我们可以使用的演示代码吗？
给你：gist.github.com/161520

标签： css html-heading

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

我已经完成了。本质上，每个计数器都必须向左浮动：

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

每个标题都必须有一个边距和一个left 属性：

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

【讨论】：

【解决方案3】：

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

这个怎么样：

h1 { text-indent: -10px }

【讨论】：