Выравнивание заголовков HTML с номерами разделов?

Question

В настоящее время я переписываю корпоративный стиль для нашей документации (HTML + CSS + PrinceXML = PDF) и не могу ничего исправить. Что мне нужно, так это передать номера разделов, то есть сами заголовки выровнены по левому краю с текстом, а номера разделов "висят" в левом столбце. Вероятно, лучшим примером, иллюстрирующим это, является отображение нумерованных списков в браузере:

---

1. Заголовок 1

   Lorem Ipsum Dolor Sit Amet, Condeteur Sadipscing Elitr, Sed Diam Nonumy Eirmod Tempor Invidunt Ut Labore et Dolore Magna aliquyam Erat, Sed Diam Volptua. В vero eos et accusam и justo duo dolores и ea rebum. Stet clita kasd gubergren, нет моря takimata sanctus есть Lorem ipsum dolor sit amet.

2. Заголовок 2

   Lorem Ipsum Dolor Sit Amet, Contetur Sadipscing Elitr, Sed Diam Nonumy Eirmod Tempor Invidunt UT Labore et Dolore Magna Aliquyam Erat, Sed Diam Volptua. В vero eos et accusam и justo duo dolores и ea rebum. Stet clita kasd gubergren, нет моря takimata sanctus есть 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 { margin-left: -10px; } будет работать, пока ваш заголовок не перейдет в две строки.

Как насчет этого:

h1 { text-indent: -10px }

Answer 3

Попробуйте это:

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