HTML見出しをセクション番号にぶら下げて整列させますか？

Question

私は現在、私たちのドキュメント（HTML + CSS + PrinceXML = PDF）のコーポレートスタイルを再実装しています。私が必要とするのはセクション番号を渡すことです。つまり、ヘッダー自体はテキストと垂直に左揃えになりますが、セクション番号は左の列に「ぶら下がっています」。おそらくこれを説明するための最良の例では、番号付きリストのブラウザのレンダリングである：1人の

Loremのイプサムの嘆きを見出し

---

1. はconsetetur sadipscing elitr、SED DIAM nonumy eirmod tempor invidunt UT laboreらdolore、AMET座りますmagna aliquyam erat、sed diam voluptua。卒業生と卒業生は、卒業後も卒業しています。 Stet clita kasd gubergren、海の傷跡はありません。Lorem ipsum dolor sit amet。 2

   ダミーテキストの悲しみを見出し

2. は、AMET consetetur sadipscing elitr、SED DIAM nonumy eirmod tempor invidunt UT laboreらdoloreマグナaliquyam ERAT、sedのDIAMのvoluptua座ります。卒業生と卒業生は、卒業後も卒業しています。 Stet clita kasd gubergren、海の傷跡はありません。Lorem ipsum dolor sit amet。

---

は基本的に、私はすべてのレベルのために、見出しの同じを実装したいです。 CSSでこれを行うには正気な方法はありますか？

Answer 1

これを試してみてください：

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

Answer 2

私はこれが行わ持っています。基本的に、すべてのカウンタが左に浮かべする必要があります。

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

、すべての見出しがマージンとleft属性を取得する必要があります：あなたのヘッダは2行になるまで

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

Answer 3

h1 { margin-left: -10px; }が動作します。

h1 { text-indent: -10px }